TIL - 20220528

 오늘은 코드숨 리액트 4주차 과제 풀이 영상을 보며 과제를 복습하는 시간을 가졌다. 마침 4주차 과제를 진행하며 고민했었던 문제의 해답이 영상에 있었다. 고민했었던 문제는 input이 여러 개일 때, 즉 예를 들어 식당의 이름, 분류, 주소를 적는 input이 있다고 할 때, input의 입력 변화를 setState로 받는 함수를 input 하나하나 만들어줘야 하나? 함수 하나만 만들어서 이 여러 개의 input을 다룰 수는 없을까?라는 문제였다. 이 문제의 해답은 input에 존재하는 name 속성을 이용하여 event를 받을 때, event 속 target 객체 안에 존재하는 name은 이 input이 어떤 input인지 알려주는 요소이고 value는 현재 입력된 값이 무엇인지 알려주는 요소임을 이용하여 해결하면 된다. 코드를 보면 다음과 같다.

이름, 분류, 주소라는 name 속성을 갖는 input 태그가 있으며 handleChange 함수는 event가 발생했을 때, 이 event 안에 존재하는 target 객체 안에서 name과 value를 객체를 onChange 인자로 호출한다. onChange 함수는

handleChage라는 다른 파일에서 선언한 함수를 onChange라는 prop으로 전달해 준 것이며 changeRestaurantField라는 액션 크리에이터는

앞서 두 번째 이미지에서 받은 name과 value를 객체로 담은걸 바로 payload에 전달해 액션을 만들며, 액션은 다음과 같이 만들어진다.

이렇게 action 속 payload 안에 있는 name과 value를 이용하여 새 상태로 반환해준다. redux를 이용하여 구현했기 때문에 설명이 장황해졌다. 앞서 말했던 것처럼 핵심은 name 속성을 이용하여 현재 입력하고 있는 input이 어떤 input인지 알 수 있기 때문에 name 속성을 이용하여 각각의 input 상태를 control 할 수 있다는 것이다. 앞으로 회원 정보와 같이 한 컴포넌트 안에 다루는 input이 여러 개 일때, 다음과 같은 방법을 사용해야겠다!