728x90 반응형 react28 [React] 주요 리터럴 표현 React의 주요 리터럴 표기법.리터럴? 변수를 저장할 수 있는 값 그자체 또는 코드에서 값을 표현하기 위한 표현.ES20XX에서 문자열 , 숫자열 , 함수 & 객체 리터럴에 대한 표현 방법 추가. * 템플릿 문자열문자열 리터럴을 `..` (백쿼트)로 묶어서 표현.const msg = `Hello, ${fullname}! --줄바꿈 가능 및 변수 삽입 가능How are you?`; 그리고 태그가 붙은 템플릿 문자열 (tag `..`) 구조도 존재export defulat css``.panel { width: 300px;}`; * 숫자 구분자숫자 구분 기호로 '_' (밑줄) 표시. 자바스크립트에선 이미 쉼표가 다른 의미를 가지고 있기에const value = 123_456_789;숫자 구분 기호는 가독성을.. 2025. 7. 6. [React] 리액트 앱을 개발/실행하기 위한 기본환경 * Create React App리액트 앱을 개발하기 위한 명령줄 도구앱의 뼈대생성 및 생성한 앱을 실행하기 위한 트랜스파일러, 번들러, 개발 서버 등의 기능을 갖춤 트랜스파일프론트엔드 개발이 복잡해지면서 순수 자바스크립트만으로는 부족할할때가 많아졌다.리액트에선 JSX (JavaScript Xml)라는 확장구문을 이용해 컴포넌트를 개발하는것이 일반적브라우저는 확장구문을 그대로 실행할 수없어서 순수 자바스크립트로 미리 변환해놔야하는데 이런 작업을 담당하는 것이 트랜스파일.대표적인 것이 Babel 번들러자바스크립트에서도 앱이 비대해지면서 코드를 모듈 단위로 관리하는 것이 일반적.대량의 모듈로 구성된 것을 개별적으로 가져오는 건 비효율적이기에 미리 모듈을 하나로 묶어 전송 효율을 높이는 목적.이런 처리를 bu.. 2025. 6. 30. [Fast Campus , React] 15. React useCallback & useMemo useCallback을 이용한 함수 최적화 원래 컴포넌트가 렌더링 될 때 그 안에 있는 함수도 다시 만들게 된다. 똑같은 함수를 컴포넌트가 렌더링 된다고 해서 계속 다시 만드는 것은 좋은 현상은 아니다. 만약 이 함수가 자식 컴포넌트에 props로 내려준다면 함수를 포함하고 있는 컴포넌트가 리렌더링 될 때마다 자식컴포넌트도 함수가 새롭게 만들어지니 계속 리렌더링 하게 된다. React.memo를 사용해도 리렌더링 되는 현상이 발생하기 함. React.useCallback 메모이제이션된 함수를 반환하는 함수 useCallback안에 콜백함수와 의존성 배열을 순서대로 넣어주면 된다 함수 내에서 참조하는 state, props가 있다면 의존성 배열에 추가해 주면 된다. useCallback으로 인해 의존성 배.. 2023. 10. 8. [Fast Campus , React] 14. React.memo를 이용한 성능 최적화 React.memo를 이용한 성능 최적화 전에 사용한 A, B컴포넌트 비교 소스를 기준으로 성능 체크 및 개선목표. [Fast Campus , React] 13. 확장프로그램, 성능측정 app 개발 B컴포넌트의 문제점? List, ListItem, Message 컴포넌트로 나뉘어 있는데, 재사용성의 목적도 있지만 각 컴포넌트의 렌더링의 최적화를 위해서이기도 함. Input에서 글을 쓸 때 원래는 Message 컴포넌트와 그 State를 가지고 있는 App 컴포넌트만 렌더링이 되어야 하는데, 상관이 없는 다른 부분까지 렌더링 되고 있다. React.memo 적용. 원하는 컴포넌틀르 React.memo로 감싸주면 적용이 된다 const Message = React.memo( ({message}) => { r.. 2023. 10. 7. [Fast Campus , React] 13. 확장프로그램, 성능측정 app 개발 리액트 개발할 때 유용한 확장프로그램 다운로드 크롬 웹스토어에서 다운로드 가능. 링크 브라우저 개발자 도구에서 React컴포넌트 트리를 검사할 수 있다 리액트 프로파일러 (React profiler) React 16.5에서 새로운 DevTools 플러그인에 대한 지원 추가. React의 Profiler API를 사용해서 React 애플리케이션의 성능병목현상을 식별하기 위해 렌더링 되는 각 구성요소에 대한 타이밍 정보를 수집 가짜 데이터 가져오기 어느정도 많은 데이터가 있을 시에 측정이 가능하기에, 가짜 데이터를 전달해 주는 곳에 요청을 보내서 받아오는 것도 필요 useEffect 컴포넌트가 렌더링될때 특정 작업을 실행할 수 있도록 하는 hook 여기선 App캠포넌트가 한번 렌더링 된 후에 jsonplac.. 2023. 10. 2. [Fast Campus , React] 12. TicTacToe 앱 만들기 (6) JSX key , jumpTo함수 JSX key 속성 리액트에서 요소의 리스트를 나열할때는 key를 넣어야한다. React가 변경,추가,제거된 항목 식별하는데 도움이 된다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 한다. 리액트는 가상돔을 이용해서 바뀐 부분만 실제 돔에 적용 key를 이용해서 어떠한 부분이 바뀌었는지 인식할 수 있다. key에는 유니크한 값을 넣어준다. (index는 비추천) 만약 리스트가 추가되거나 제거되면 해당 리스트의 key값도 바뀔수 있기 JumpTo 함수 작성 현재 몇 번째 스텝이지 알수있는 state 생성하기. 이전으로 되돌아갔을때 그 step을 기억하기 위해 const [stepNumber, setStepNumber] = useState(0); stepNumber를 업데이트위해 j.. 2023. 10. 1. 이전 1 2 3 4 5 다음 반응형
