Props
![[React] 부모, 자식 컴포넌트 리렌더링 관계 (props,state)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbAaJk9%2FbtsGBgtgXsE%2F0RZyjKKd2Lz2F0yOBxcR1K%2Fimg.png)
[React] 부모, 자식 컴포넌트 리렌더링 관계 (props,state)
리액트는 보통 부모 -> 자식 방향의 단방향 정보전달의 구조를 이루고 있다. 따라서 자식 컴포넌트에서 정보가 변하지 않고 부모 컴포넌트에서만 값이 변해도 자식 컴포넌트가 같이 렌더링 되는 불필요한 과정이 있다. 이를 해결하기 위해서 memo, useMemo, useCallback 등을 사용할 수 있는데 실제로 리랜더링을 얼마나 막아줄 수 있는지와 props로 객체가 전달되었을 경우에 대한 이해를 여러가지 케이스들을 실험해 보며 정리해 보자. 1. 세팅 먼저 간단한 프로젝트를 CRA를 활용해서 만들어 보았다! npx create-react-app react-render --template typescript components라는 폴더를 만들고 간단하게 부모 컴포넌트, 자식 컴포넌트를 만들어준다. //Ap..
10_컴포넌트_JSX,props,useState
JSX문법 리액트에서 컴포넌트 생김새를 정의하는 문법으로 HTML처럼 생겼지만 사실 자바스크립트이다. 우리가 HTML형식으로 만들어주면 babel이 이것을 JS로 바꾸어준다. 위처럼 말이다. 이때 이 변환을 사용하기 위해서는 몇가지 문법을 꼭 지켜주어야 정상 변환이 된다. 1. 태그를 꼭 닫아주어야 한다. 리액트에서는 input이나 br태그같은 태그또한 닫아주어야 한다. 2. self tag 과같이 내용없이 닫히는 태그는 로 변환하여 쓸 수 있다. 3. function App() { return ( 나는정민규. ); } 위처럼 를 사용하여 불필요한 div태그를 줄일 수 있다. 4. () return 이후 ()는 가독성을 위해 존재하고 굳이 없어도 작동한다. 5. 변수 import React from 'r..