React
-
[리액트 기초]context 사용법React 2023. 4. 1. 20:24
유데미 강좌를 보고 공부한 내용을 정리해보았습니다. 여기서는 context를 사용하는 이유와 간단한 사용법을 정리하였습니다. 리렌더링과 관련된 최적화와 Redux의 차이는 따로 정리 컨텍스트를 사용하는 이유 컴포넌트 간 데이터를 전달하려면 props를 이용한다. 리액트는 단방향 데이터 흐름을 갖기 때문에, 부모 자식 관계에서 데이터를 전달하게 된다. 위에서 아래로 흐르는 데이터 흐름이 깊어질 수록 데이터를 전달하는데 불편함이 생긴다. 이렇게 구성된 컴포넌트가 있다. 이것은 로그인폼에서 로그인을 하면 Shop과 Cart컴포넌트에 상태를 업데이트 한다. 그리고 product에서 카트에 담으면 Cart에 상태를 업데이트 하는 작업을 한다면, 데이터는 단방향으로 흐르기 때문에 LoginForm에서 Shop과 C..
-
[리액트 기초]FragmentReact 2023. 3. 31. 17:55
1.Fragment를 사용하는 이유 공식문서의 예제를 확인해보자.아래와 같은 테이블 컴포넌트가 있다. const Table = () => { return( ); } 는 여러 를 반환 해야 하는데, div로 자식을 감싼다면 렌더링 된 table은 유효하지 않을 것이다. const Columns = ()=> { return ( Hello World ); } Table의 결과 Hello World Fragments는 이런식으로 의미없는 를 사용하는 문제를 해결해준다. import { Fragment } from "react"; const Table = () => { return ( Hello World ); } 2.단축 문법 Fragment대신 이런식의 축약형으로 사용이 가능하다. import { Fragme..