솔미는 성장중

1. JSX 페이스북에서 만든 내장형 구문 트랜스파일러를 필수적으로 거쳐야 자바스크립트 런타임이 이해할 수 있는 JS코드로 변환됨 설계 목적 : 다양한 트랜스파일러에서 다양한 속성을 가지 ㄴ트리 구조를 토큰화해 ECMAScript로 변환하는 데 초점 = JSX 내부에 트리 구조로 표현하고 싶은 것을 작성해두고, 트랜스파일 과정을 거쳐 JS(ECMAScript)로 변경하는 것이 목표 JSX 컴포넌트 JSXElement - 가장 기본 요소 - 역할 : HTML element와 유사 - JSXElement의 요소 이름으로 쓸 수 있는 것 (JSXElementName) - 도 가능 (JSXIdentifier) - : 를 이용해 서로 다른 식별자를 이어준 것 ex) (JSXNamespacedName) , (JSX..

UI를 요청하고 제공하는 3단계 1. 렌더링 촉발 - 렌더링이 일어나는 이유 : 1. 컴포넌트의 첫 렌더링일 때 : 2. 컴포넌트의 state가 업데이트된 경우 2. 컴포넌트 렌더링 - React에서 컴포넌트를 호출한다 : 1. 컴포넌트의 첫 렌더링일 때 ▶ 루트 컴포넌트 호출 : 2. 컴포넌트의 state가 업데이트된 경우 ▶ state 업데이트에 의해 렌더링이 발동된 함수 컴포넌트 호출 ▶ 함수가 새로운 JSX스냅샷 반환 ▶ 반환된 스냅샷과 일치하도록 화면을 업데이트 - 중첩된 컴포넌트가 더 이상 없고 React가 화면에 표시되어야 하는 내용을 정확히 알 때까지 재귀적으로 과정 반복 - 렌더링 시 주의사항 : 동일한 입력에는 동일한 출력이! : 이전 state를 변경하면 안된다! 3. DOM에 커밋 ..

문제 상황 오히려 컴포넌트를 나눴더니 성능이 떨어진다? 이것은 렌더링이 최적화되어있지 않기 때문이다. props가 변화하는 곳만 렌더링 해주면 되는데 전부 다 렌더링하고 있는 경우 이런 현상이 발생한다. 해결법 React.memo 컴포넌트를 React.memo()로 둘러싸면 컴포넌트를 메모이징한다. props가 바뀌지 않은 컴포넌트는 새롭게 렌더링되지 않고 메모이징 된 내용을 재사용한다. 언제 사용하면 좋을까? - 새로 업데이트를 잘 시키지 않아도 되는 컴포넌트 예시 const List = React.memo(({ posts, testFunction }) => { console.log("List Component"); return ( {posts.map((post) => ( ))} ); }); useCa..