패스트캠퍼스 챌린지 28일차 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online

2022. 2. 20. 11:35공부/패스트캠퍼스

수강 인증샷


패스트캠퍼스 챌린지란?

 패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.


28일차

 28일차에는 27일차에 마저 적지 못했던 Part 1. React 기초 Ch 02. 공식 문서로 디테일잡기(초급) 챕터에서 10. Form 강의 내용의 나머지를 기록하려 한다.

 Part 1. React 기초 Ch 02. 공식 문서로 디테일잡기(초급) 챕터에서 10. Form 강의에서 제어 컴포넌트에 대해 다룰 때, 입력을 받는 input 엘리먼트 속 value 어트리뷰트는 폼 엘리먼트에 설정되므로 state값을 넣어줌을 통해 React state는 신뢰 가능한 단일 출처가 된다. React state를 업데이트하기 위해서는 모든 키 입력에서 handleChange가 동작하기 때문에 사용자가 입력할 때 보이는 값이 업데이트되었다. 반대로 비제어 컴포넌트에 대해 공부하면 대부분의 경우에 폼을 구현하는 데 있어서 제어 컴포넌트를 사용하는 것이 좋지만, 제어 컴포넌트에서 폼 데이터는 React 컴포넌트에서 다루어지기 때문에 그에 대한 대안인 비제어 컴포넌트는 DOM 자체에서 폼 데이터가 이루어진다. 제어 컴포넌트에서 모든 state 업데이트에 대한 이벤트 핸들러를 작성하는 대신 비제어 컴포넌트를 만들려면 ref를 사용하여 DOM에서 폼 값을 가져올 수 있다. 비제어 컴포넌트는 DOM에 신뢰 가능한 출처를 유지하므로 비제어 컴포넌트를 사용할 때 React와 React가 아닌 코드를 통합하는 것이 쉬울 수 있으며 빠르고 간편한 코드를 작성할 수 있지만, 그 외에는 일반적으로 제어된 컴포넌트를 사용해야 한다.


본 게시글은 이벤트 참여를 위해 작성된 게시글입니다.

 


패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC