1. 왜 Controlled, UnControlled를 알아야 할까?
- React는 컴포넌트가 상태(state)를 가지게 해서 각 컴포넌트가 독립적으로 동작하도록, 단일 소스로 관리하려는 설계 원칙을 가지고 있습니다.
- 또한, props를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 단방향 흐름을 지향합니다.
- 위와 같은 원칙들은 <div>와 같이 데이터를 가지지 않는 엘리먼트를 사용할 땐 문제가 되지 않습니다.
- 하지만, <input>. <textarea>, <select>와 같이 자체적으로 value를 가지는 엘리먼트에 접근하려면 document.querySelector를 사용하게 되고, 위의 원칙들을 위배하게 됩니다.
- https://soldonii.tistory.com/145
React의 설계 원칙에 맞게 접근하기 위해 사용되는 방법으로 Controlled와 UnControlled 컴포넌트가 있고,
이들에 대해 간략히 알아보려 합니다.
----
1. ControlledComponent
- 컴포넌트 내에서 상태를 사용하는 컴포넌트입니다.
- 상태값에 따라 컴포넌트의 동작 방식이 결정될 때 이 방법을 사용합니다.
ControlledComponent.jsx
/* ControlledComponent.jsx */
import React from 'react';
class ControlledComponent extends React.Component {
constructor() {
this.state = {
value: ''
}
}
change = (e) => {
this.setState({ value: e.target.value });
}
render() {
return (
<div>
<input value={this.state.value} onChange={this.change} />
</div>
)
}
}
export default ControlledComponent;
- 위 컴포넌트는 <input>에 입력이 되었을 때, change 함수가 state 값을 변경해서 실시간으로 <input>에 값을 반영하고 있습니다.
- 독립적 컴포넌트인 단일 소스 설계 원칙을 준수하는 걸 알 수 있습니다.
2. UnControlledComponent
- 상태(state)를 가지지 않는 컴포넌트입니다.
- 컴포넌트가 상태를 가지고 있지 않아도 되는데, <input>과 같이 value를 가지는 엘리먼트에 접근해야 할 때 이 방법을 사용합니다.
UnControlledComponent.jsx 파일 생성
/* UnControlledComponent.jsx */
import React from 'react';
class UnControlledComponent extends React.Component {
inputRef = React.createRef();
change = () => {
console.log(this.inputRef.current.value);
}
render() {
return (
<div>
<input ref={this.inputRef} onChange={this.change} />
</div>
)
}
}
export default UnControlledComponent;
- 위 컴포넌트는 React.createRef 함수를 사용해서 <input>을 참조할 수 있는 변수를 만들고, 엘리먼트에 접근하고 있습니다.
- 컴포넌트 내에서 독립적으로 동작하고, document.querySelector를 사용해 전역적으로 접근하지 않아도 되므로, 상위에서 하위로의 단방향 흐름을 유지할 수 있다는 걸 알 수 있습니다.
'JavaScript > React' 카테고리의 다른 글
React - 배포하기 (0) | 2022.02.23 |
---|---|
React - Hooks, Context (0) | 2022.02.08 |
React - Component Styling (0) | 2022.01.28 |
React - React Router DOM (0) | 2022.01.26 |
JSX - 기본 개념과 문법 정리 (1) | 2022.01.22 |