리액트 기초

오늘 리액트에 대해서 하나 배운 것 공유합니다.리액트 버전 17 이전에는 항상 를 써줘야했습니다. 그래서 항상 컴포넌트가 아래와 같은 초기 세팅을 가져야했습니다.브라우저는 JSX를 이해하지 못하므로 JSX코드는 자바스크립트 코드로 컴파일될 필요가 있는데 create-r

Child를 클릭했을 때 Parent의 이벤트 리스너가 트리거되는 것을 막기 위해 e.stopPropagation()을 써도 작동하지않는다.이유는 React에서는 event가 SyntheticEvent로 실제 DOM의 이벤트와 다르다.DOM이벤트를 Wrapper로 만든

React에서 앱 성능 향상을 위해 존재하는 함수 React.lazy 가 있다.위 함수에 대해서 찾아보면 코드 분할 번들링 동적 import 같은 표현들이 여러 자료에서 공통적으로 언급되는 것을 발견할 수 있었다.React.lazy 함수는 동적 임포트를 하기 위해 존재

리액트의 상태 변수가 그냥 일반적인 자바스크립트 변수처럼 보이지만 상태는 하나의 스냅샷에 더 가깝다. setState 함수를 이용하여 상태를 업데이트하는 것은 현재의 상태를 변경시키지 않고 리렌더링을 일으킨다.이번 포스팅에서 얻을 수 있는 부분은..상태 값을 변경하는게

자바스크립트 버전 중 ES6(ECMAScript 2015) 이상의 버전으로 작성된 자바스크립트 코드를 하위 버전의 자바스크립트 코드로 바꿔주는 혹은 트랜스파일(transpile) 해주는 자바스크립트 컴파일러라고 공식 홈페이지에서 정의하고 있다.react 프로젝트를 세팅

먼저 리액트의 구성요소인 아래 두 패키지를 설치해준다.그리고 타입스크립트로 작성할 것이기 때문에 타입스크립트도 설치해준다.그 후 프로젝트의 기본 뼈대를 만들기 위한 코드를 작성해주자. 타입스크립트는 빌드된 웹앱에서는 아무 역할이 없기 때문에 devDependencies

제네릭 컴포넌트 선언 사용

PropsWithChildren 타입을 이용하여 Props에 children 속성을 패스할수 있게 지정해준다.이 코드에서 핵심 포인트는 두가지라고 생각했다.React.isValidElement()React.cloneElement()배열에 들어있는 각 아이템들을 렌더링

위 코드는 배열 상태에 새로운 객체를 추가하는 기능을 하고 있다.새로운 요소를 추가하는 식으로 상태를 업데이트하는게 아니라기존의 배열 안의 위 객체를 수정해주려면 어떻게 해야할까 생각해보게 되었다.위 방식으로 수정해준다면 상태를 사실 업데이트하는게 아니게 된다.상태의

Tree shaking은 번들링 과정에서 Dead Code를 제거하는 행위를 말합니다.Dead Code 는 아래와 같이 사용하지 않는 코드를 의미합니다.이 Tree shaking 번들링 과정에서 발생하는 행위라고 했습니다.번들링은 번들러에 의해서 수행됩니다.그럼 이 T

일반적으로 자식 컴포넌트를 렌더링하는 방법을 생각하면 아래 방식을 떠올립니다.위 방식의 경우에는 부모 컴포넌트인 Parent의 상태가 변경되어 Parent 컴포넌트가 리렌더링이 될 경우 Parent의 자식 컴포넌트인 Child 컴포넌트도 리렌더링이 되게 됩니다.리렌더링