Optimizing Performance 필요할 때만 렌더 한다. App.js => App.js => 불필요한 render 멈추기 Class 컴포넌트 shouldComponentUpdate 이용하기 App.js => React.PureComponent 상속받아 이용하기 App.js => 주의점 App.js => Function 컴포넌트 App.js => createPortal ![](https://velog.velcdn.com/images/junb119/p

Hook : class 컴포넌트에서만 사용가능하던 state와 lifecycle을 함수 컴포넌트에서도 쓸수 있게해줌. state와 관련된 로직을 재사용가능하게 해줌. Basic Hooks useState useEffect useContext class component로 state 처리 src => components => Example1.jsx => function component로 state 처리 src => components => Example2.jsx => src => components => Example3.jsx => function 컴포넌트에서 state를 다루게 된 이유 렌더 사이에서 바뀐 state를

Higher Order Component(HOC) HOC : 고차컴포넌트 리액트에서 컴포넌트 안에 있는 로직을 다시 재활용 할 수 있는 기술 리액트 api 와 관련 없음 컴포넌트를 상속받거나 재활용하는게 아닌 조합하는 리액트 컴포넌트의 본성에서 야기된 패턴 Hook의 등장으로 사용이 줄어듬 여러 라이브러리에서 제공하는 hoc Reduct의 connect() Relay의 createFramentContainer() React의 withRouter() - 보통 with가 붙은 함수가 HOC인 경우가

Style Loaders CRA 안의 webpack 설정이 파일 확장자에 맞는 loader에게 위임 Style Loaders는 .css를 다룸 >npx create-react-app style-loaders-example cd style-loaders-example npm run eject // webpack 설정이 어떻게 되어있는지 꺼내서 확인하기 위해 code. -r config -> webpack.config.js .css 검색 style로더에서 각 확장자를 어떻게 다루는지 확인할 수 있다. ![](https://velo

React의 라우팅 이해하기! 전통적인 브라우저 : 필요할 때마다 서버에 요청해서 데이터를 받아옴 SPA(Single page application) : 하나의 큰 앱을 받아 온 후 브라우저(client)에서 보여줄 것들을 취사선택 리액트 라우터 돔(React router dom) = 브라우저에서 어떤 컴포넌트를 보여줄지에 대한 로직을 처리 `npm i reac

Create React App ESLint Prettier husky lint-staged 리액트 컴포넌트 디버깅 1. Create React App(CRA) https:// create-react-avv.dev npx create-react-app tic-tac-toe >npx : npm 5.2.0 이상부터 함께 설치된 커맨트라인 명령어 > 현재 최신버젼의 라이브러리를 설치해줌 >### paclage.json >npm start ![](https://velog.velcdn.com/ima

Component Lifecycle 리액트 컴포넌트는 탄생부터 죽음까지 여러지점에서 개발자가 작업이 가능하도록 메서드를 오버라이딩 할 수 있게 해준다. Declarative(디클레러티브) |Initialization|Mounting|Updation|Unmounting| |-|-|-|-| |Constructor(생김)|render(브라우저에 그려짐)|변경|사라진 후| ------16.3버젼 이전 -> constructor -> componentWillMount(랜더 전) -> getDerivedStateFromProps -> render(최초 랜더) -> componentDidMount(랜더 후) Component 에러 캐치

함수형 Component에서 Event Handling 다루기 클래스형 Component에서 Event Handling 다루기 기본 * state를 사용해 EventHandling 해보기* #class Component내에서 만든 메소드를 EventHandlings로 사용할 때 this에 바인드 해주는 방법 constructor에 클래스의 this를 바인드 Arrow 함수를 이용

Props와 State Props >>1. 함수로 컴포넌트 정의하기 >>>1) Component에 Props 전달X 2) Component에 Props 전달 >>2. 클래스로 컴포넌트 정의하기 >>3. Props가 지정되지 않았을 때 사용 할 기본값 설정하기 >>>1) 첫번째 방법: Props기본값을 따로 지정(클래스, 함수 둘다 사용) >>>2) 두번째 방법: class의 문법적 기능을 사용(클래스에서만 사용) > - State >> class 컴포넌트에서 state 정의하기 >>> 1. 클래스 컴포넌트의 멤버변수(Property)로 state 정의 >>2. 생성자함수를 이용해 정의 >>3. state내용 변경(this.setState함수) >>>> 1) 객체를 통째로 새로 생성(덮어쓰기) >>>> 2) 앞의 값을 이용해서 뒤의 값 새로 생성 ![](https://velog.velcdn.com/images/junb119/post/4e9d42ff-09b7-4b96-9e92-

babel : 작성한 어떤 코드를 순수하게 실행할 수 있는 자바스크립트로 변환시켜줌 >> >> > >>결과 > >JSX 문법 > > 1. 최상위 요소가

React.createElement (type, [props], [...children]) : html 하위 태그 요소를 생성하는 메소드 > createElement의 매개변수 "type", "[props]", "[...childeren]" > > type : 태그이름 or 함수, 클래스, Frament >>type인수는 유효한 React 구성 요소 유형이어야 한다. ex) 태그 이름 문자열(예: 'div'또는 'span'), React 구성 요소(함수, 클래스 또는 Fragment와 같은 특수 구성 요소) >>> > props : null or 객체 >> props 인수는 null or 객체 null을 전달 하면 빈 개체와 동일하게 처리. propsReact는 전달한 것과 일치하는 소품으로 요소를 생성합니다 . ref및 keyfrom 귀하의 props개체는 특별하며 반환 된 에서 and 로

기본 구조 > 결과 >고전적 프론트엔드 방식으로 Dom조작 > React를 사용하지 않고 컴포넌트화 하여 Dom 조작 > React로 Component를 만들어 Dom 조작 > > >> 클래스를 사용한 컴포넌트 생성 > >>함수를 사용한 컴포넌트 생성 > > => 결과

Component? > src. class, name, props : 밖에서 컴포넌트 안으로 넣어주는 데이터 component : 문서(HTML) , 스타일(CSS), 동작(JS)를 합쳐서 내가 만든 일종의 태그