5.8) State로 사용자 입력 관리하기 1

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

작성

강의 6분쯤에 "" 으로 공백이었던 useState의 초깃값을 "이름"으로 바꿔주면서 value={name} 구문을 추가해주셨는데요, 공백일 때에는 같은 문자열임에도 해당 구문 없이도 잘 작동했는데 "이름"으로 설정했을 때에는 해당 구문이 필요한 이유는 무엇인가요?
지피티에 물어보니 Uncontrolled와 controlled input이라는 새로운 개념을 언급하길래 잘 이해가 안 되어 여쭤봅니다!

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

단순히 State의 기본값을 <input/> 태그에 설정하기 위함입니다. State의 기본값이 ""로 빈 문자열 일때에는 기본값이랄게 딱히 없기 때문에 <input/> 태그가 비워져 있는채로 렌더링 되어도 문제가 되지 않았지만, "이름"과 같이 특정 문자열로 설정되면 <input/> 태그가 처음 렌더링 될 떄 부터 해당 값을 화면에 렌더링 하도록 설정해줘야 합니다. 따라서 value 속성의 값으로 State의 값을 설정해주는 것 입니다.

이근호

질문올리기전에 같은 궁금증을 가지신 분께서 질문 올려주신게 있어서 들어와봤습니다!

const Register = () => {
  const [name, setName] = useState("");
  const onChangeName = (e) => {
    setName(e.target.value);
  };

  return (
    <div>
      <input value={name} onChange={onChangeName} placeholder={"이름"} />
      {name}
    </div>
  );
};

위와 같이 빈 문자열로 하고

const [name, setName] = useState("");

<input value={name} />

으로 지정해도 상관은 없을까요?

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 차예린님!

리액트에서 <input>의 value 속성에 대해 설명해 드리겠습니다. 기본적으로 리액트의 입력 컴포넌트는 Controlled(제어 컴포넌트)와 Uncontrolled(비제어 컴포넌트)로 나뉩니다.

Controlled Components(제어 컴포넌트): 리액트 상태를 통해 입력의 값을 제어합니다. value 속성을 사용하여 상태와 입력 필드의 값을 동기화하여, 상태가 변경될 때마다 입력 필드의 값도 함께 변경됩니다. 이것은 사용자 입력 외 다른 이벤트에 의해 상태가 변경될 수 있는 경우 유용합니다.
Uncontrolled Components(비제어 컴포넌트): 리액트가 직접 관리하지 않고 DOM 요소에서 자체적으로 값을 관리하게 합니다. 보통 초기값만 세팅한 후로는 사용자 입력에 의해 값이 변경되어 리액트가 직접 관여하지 않는 방식입니다.

당신의 질문에서, 초깃값을 “이름”으로 설정하여 value={name} 구문을 사용하는 경우는 Controlled Component로 처리하고자 하는 의도를 가집니다. 이렇게 하면, 상태로부터 초기값을 설정할 수 있고, 상태가 변경될 때마다 자동으로 입력 필드의 값도 변경됩니다. 이는 일관된 UI를 제공하고, 예를 들어 검증 로직이나 비동기 데이터 처리와 같은 로직에서 유리합니다.

관련 내용을 더 깊이 이해하기 위해, 아래 링크를 참고하시면 도움이 될 것입니다:
- input의 value속성이 꼭 필요한가요?
- input의 name값

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변