[카카오테크캠퍼스 9주차] React로 구현하기

⏳ 2023. 6. 5. - 2023. 6. 11.

 

제어 컴포넌트와 비제어 컴포넌트

reference : [강의안] 제어 컴포넌트와 비제어 컴포넌트

 

제어 컴포넌트 : 리액트가 제어하는 폼 엘리먼트

비제어 컴포넌트 : 리액트로 제어되지 않는 폼 엘리먼트

폼 엘리먼트?

Form을 구성하는 DOM 자체에서 상태를 가지는 DOM 엘리먼트(input, textarea, select)

리액트의 state가 아니라 DOM 자체의 state이기 때문에 리액트가 상태를 제어할 수 없다.
리액트가 DOM의 상태에 접근하려면 ref를 통해 접근해야 한다.

 

폼 엘리먼트가 아닌 다른 DOM 엘리먼트는 리액트의 state로 상태를 관리한다.

1. 컴포넌트 내 직접 관리
2. 부모로부터 props를 통해 상태 내려받기(상태 리프팅)
3. 전역 state를 주입받기

 

폼 엘리먼트는 제어/비제어 방식으로 다룰 수 있다.

리액트스러운 방식은 제어 컴포넌트 방식이지만, 개발은 항상 트레이드-오프이다.

제어 방식은 form 조작이 편리해지지만, state가 변경될 때마다 렌더링이 일어나기 때문에 그만큼 무거워진다.

form이 간단하고 실시간으로 이루어져야 하는 작업이 없다면 제어 컴포넌트를 이용할 필요는 없다.

 

어떤 범위에서 상태를 참조하고 있는지 잘 생각하며 상황에 맞는 방식을 선택하자.

---

회원가입 예제

GitHub - iam454/signup-app-react

아직은 리액트가 굉장히 낯설다..

js로 만들 때는 이렇게 이렇게 하면 되겠다 생각이 났는데

리액트로 작성하려고 하니 멍.. 🤯 어렵다..

 

react-hook-form

Home

최적화 문제를 해결하기 위해 라이브러리를 사용하는 것도 하나의 방법이다.

form에 관련된 유용한 기능이 많다고.. 한다..