목적
- 입력 태그(input, select) component화
- 다중 입력 값 상태 관리
- 각 컴포넌트에서 상태를 관리(re-rendering 낭비 방지)
- 입력 컴포넌트에서 입력을 마쳤을 때 부모 컴포넌트에서 정보 최신화
<div className="App">
<form>
<select name="lastname">
<option value="lee">lee</option>
<option value="kim">kim</option>
<option value="park">park</option>
</select>
<input name="age"></input>
<input name="birthday"></input>
<button type="submit">등록</button>
</form>
</div>Component 구현
Select Component
<select name="lastname">
<option value="lee">lee</option>
<option value="kim">kim</option>
<option value="park">park</option>
</select>위 html select 코드를 다음과 같이 변경할 수 있다.
- 부모컴포넌트(App.js)
- 자식컴포넌트(Select.jsx)
react: 리스트와 Key
Input Component
<input name="age" />
<input name="birthday" />위 html input 코드를 다음과 같이 변경할 수 있다.
- 부모컴포넌트(App.js)
- 자식컴포넌트(Input.jsx)
Controlled Component
구현하고 싶었던 것은 다음과 같다.
- state는 각 컴포넌트에서 관리한다.
- 부모 컴포넌트에서 관리할 경우 re-rendering 낭비 우려
- form 버튼을 클릭 시 데이터가 보내질 수 있도록, 각 "입력 컴포넌트"에서 입력을 마쳤을 때 부모 컴포넌트에서 최신화를 시킨다.(자식 컴포넌트 입력 값 최신화)
state는 각 컴포넌트에서 관리
- 부모컴포넌트(App.js)
- 자식컴포넌트(Select.jsx)
- 자식컴포넌트(Input.jsx)
자식 컴포넌트 입력 값 최신화
입력 폼에서 focus가 풀릴 때는 입력을 마친 것으로 판단하여, onBlur 함수를 통해 입력 값을 부모컴포넌트에 최신화 시켜준다.
- 부모컴포넌트(App.js)
- 자식컴포넌트(Select.jsx)
- 자식컴포넌트(Input.jsx)
결과
각 입력을 마칠때 마다 정보가 최신화 되는 것을 확인할 수 있다.
자식컴포넌트로부터 State 값을 바로 받아야한다면?(07.07 추가)
Select 같은 단일 값에 의해 폼의 형태가 바뀌는 예시이다.
이처럼 자식컴포넌트(select, input 등) State를 바로 받아와야 할때가 있다.
이럴 땐 useEffect Hook을 사용하면 된다.
export const Select = ({ options, ...props }) => {
const [selectValue, setSelectValue] = useState(options[0].name);
useEffect(() => {
props.getInputValue({ [props.name]: selectValue });
}, [selectValue]);
selectValue의 state가 변하면 리렌더링 이후 useEffect가 실행되는데, 부모컴포넌트로부터 받은 함수(getInputValue)를 사용하여 자식컴포넌트의 State를 바로 업데이트 해준다.
위 예시처럼 onBlur를 사용하면 다음과 같은 현상이 나타난다.
(마우스가 안보여서 설명하자면 선택하고 다른 곳을 클릭해야 자식컴포넌트로부터 State 값을 받아서 많이 불편하다.)
문제점
onBlur 이벤트가 발생할 때마다 부모컴포넌트는 정보를 최신화 시킨다.(State 변경) State가 변경되면서 re-rendering이 발생하게 되고, 가만히 있던 입력 값 태그들은 re-rendering 하게 된다.
- 해결방안 : useMemo 적용?
