React.memo, useCallback, useMemo 정리

React.memo, useCallback, useMemo 정리 예정,,

• format_list_bulleted 공부합시다 ✏️/React
• · 2024. 5. 31.
• textsms

리액트에서 상위 컴포넌트와 부모 컴포넌트는 다르다

리액트 수업 중 얼핏 알았지만, 정확히는 몰랐던 개념이 나왔다. 아래 코드에서 RouterProvider, div의 부모 컴포넌트는 ? 감싸고 있는 Wrapper? App?나 또한 확신있게 말하지 못했다 정답은 App이다 누가 부모 컴포넌트인지 확인하는 가장 빠르고 정확한 방법은 props 전달이다Wrapper에서 div로 props 전달이 가능한가?  아니다 props로 내려줄 수 있는 건 App 컴포넌트에서 가능하다 Warpper 는 상위 컴포넌트, App은 부모 컴포넌트이다 결론- 부모 컴포넌트는 자식 컴포넌트에게 데이터를 전달할 수 있다 (props 형태로)- 부모가 바뀔 때 자식이 리렌더링된다

• format_list_bulleted 공부합시다 ✏️/React
• · 2024. 5. 29.
• textsms

React 프로젝트에서 사용할 CSS 라이브러리 비교 (PureCSS, PostCSS, Tailwindcss, Styled Components)

CRA에서 기본 사용-postcss, tailwindcss, sass-loaderPure CSS1. 순수 css 파일2. 이름 충돌 문제 발생 CSS 파일을 직접 작성하고 컴포넌트에 import 하여 사용한다동일한 이름이 있을 경우, 가장 나중에 로드된 CSS로 덮어씌워진다 PostCSS컴포넌트.module.css *.module.css 파일로 CSS를 모듈화하고, styles 객체를 가져와 사용한다동일한 클래스 이름이라도 자동으로 고유한 ID가 붙어 충돌을 방지한다import styles from ‘./Button1.modle.css’Button2; styled Components (CSS-in-JS)스타일링 된 컴포넌트 스타일링 된 컴포넌트를 생성하여 사용한다컴포넌트이기 때문에 리액트를 위한 스타..

• format_list_bulleted 공부합시다 ✏️/React
• · 2024. 5. 24.
• textsms

React Component와 React Element 차이

리액트의 정체성인 컴포넌트와 한번쯤은 들어봤을 엘리먼트!이 둘의 차이가 정확히 뭔지 모른채 그게 그거지 했었다 리액트 컴포넌트(React Component)UI의 한 부분을 캡슐화하여 재사용 가능한 코드 블록, 즉 함수다리액트 컴포넌트가 반환하는 것이 리액트 엘리먼트이다function MyComponent() { return Hello, World!;} 리액트 엘리먼트(React Element)컴포넌트의 인스턴스로, 직관적으로는 JSX에서 html 태그로 된 객체이고,내부적으로는 화면에 표시할 내용을 기술한 Virtual DOM에서 사용하는 객체이다 즉, 컴포넌트가 렌더링하는 모든 UI 정보를 가진 객체이다 그리고 React DOM는 엘리먼트들을 모아 Virtual DOM을 만들고, 업데이트 전 Vir..

• format_list_bulleted 공부합시다 ✏️/React
• · 2024. 5. 13.
• textsms

[삽질기록] <></> (framgent) 태그와 div태그의 차이

리액트에서는 컴포넌트 당 하나의 컴포넌트를 반환한다 만약 여러 개의 컴포넌트를 반환하고 싶다면, 최상위에 빈태그 혹은 div태그를 감싸서 반환한다 이때 사용하는 두 태그의 차이점은 무엇일까? 부모 요소가 시각적인 기능을 하지 않는다면, Framgent 태그를 사용하는 것이 좋다! 1. Framgent ... Framgent 태그는 DOM 요소에 등록되지 않아 레이아웃/스타일링에 영향을 주지 않는다 일반적으로 빈태그를 사용하지만 명시적으로 Framgent 를 작성해야하는 경우가 있다 바로 반복해서 여러 요소를 렌더링할 때이다 react에서는 요소들이 반복해서 렌더링 될 때 key를 입력해줘야 한다 function Blog() { return posts.map(post => ); } 2. div ... 렌더..

• format_list_bulleted 공부합시다 ✏️/React
• · 2024. 4. 8.
• textsms

상태관리의 근본 API, Context

Vue로 처음 프론트를 접한 나는 리액트도 당연히 양방향으로 데이터 이동이 가능한 줄 알았다 리액트를 배웠을 때 props 전달에서 데이터를 내리고 올리다가 길을 잃었다.. 완전 냄새나는 코드를 작성하다가 Context를 알게되었다그리고 많은 라이브러리에서 Context 개념을 사용하고 있었다!Context란 ?props 없이 React에서 컴포넌트 간에 데이터를 전달하기 위한 개념이다즉 데이터를 사용하지 않는 컴포넌트들은 지나치고, 필요한 곳에서 바로 사용할 수 있다 리액트에서 유일하게 컴포넌트를 건너뛰면서 데이터를 전달하는 방법! 언제 사용하는건데?리액트는 단방향 데이터로, 데이터를 전달하기 위해서는 부모 컴포넌트에서 자식 컴포넌트로 props 전달한다하지만 앞서 예시처럼 중간에 여러 컴포넌트들을 거..

• format_list_bulleted 공부합시다 ✏️/React
• · 2024. 2. 7.
• textsms