React 복습 / useState(Hook), 렌더링

Winsam·2024년 3월 11일

React 복습 hook useState 렌더링 이론

useState

검색창을 예를 들어보면 유저가 검색을 위해서 특정 검색어를 입력할 때, 한글자 한글자 마다 렌더링이 다시 일어나면서 추천하는 검색어가 뜬다. 특정 화면에서는 유저가 입력한 정보가 바로바로 출력이 되어야 하는 경우도 있는데 이때 매번 새로운 창을 뜨게 만들면 매우 번거로울 것이다. 그래서 relendering 을 해주는 Hook에 대해서 복습해보겠다.

import

모든 hook 을 사용할 때는 import가 필요하다. 지금은 useState를 사용할 것이니까 useState 를 react로 부터 import 해주겠다.

복습 1) onClick, onChange가 발생 시, 입력받은 값을 hook을 통해 리 렌터링 해서 출력해보기

대략 아래의 테스트를 해볼 것이다.

count 를 +, - 했을 때 값을 바로 화면에 띄워보겠다.
1. 부모 컴포넌트에서 +, - 를 클릭 시 하위 컴포넌트 호출

2. 하위 컴포넌트에서 useState 를 이용해서 count 값을 처리 함

hook 선언 const[count, set] = useSate(count의 초기값 Value);
=> 만약 +를 누르면 (0+1) 의 값이 setCount로 전달되고 count에 저장 함. 그리고 리렌더링

리 렌더링이 되었으니 화면에 count+1이 된 값이 출력 됨
다른 테스트들도 마찬가지이다. 부모 컴포넌트에서 바뀐 이벤트를 하위 컴포넌트로 전달하고 하위 컴포넌트에서 useState를 활용해서 출력해준다.

복습 2) input이 수십개 있는 경우, useState를 간편하게 적용하기

회원가입창이 있는데 그 페이지의 회원가입창은 모든 컬럼이 수정될 때마다 무언가를 해줘야한다고 가정해보자. 그러면 적게 잡아도 10개정도는 컬럼이 존재할텐데 모든 컬럼에 useState를 적용해줘야 하는데 매우 불편하다. 그때 펼침연산자(...example) 을 이용해서 하나로 통일해서 사용가능하다.

1. useState 의 초기값으로 컬럼의 이름을 초기값으로 선언해준다.
2. 펼침연산자(...state)를 활용해서 이전 값을 가져오고 객체 구조분해를 이용해서 바뀐 컬럼에 수정된 value 값을 넣는다.