Chapter04. 리엑트 입력 폼(form)

<< 학습 목표 >>

1. 입력 폼에 기본값을 갖도록 설정할 수 있다.

2. 입력 폼이 기본값을 가지면서 변경되도록 설정할 수 있다.

---

리엑트로 입력 폼(form)을 핸들링 하는 방법은 지금까지 우리가 중간 중간 배운대로만 알아도 됨

가끔 필요한 경우가 있는 것들만 간단하게 알아보자

 

우선 프로젝트 -> src -> chapter04 폴더를 만들자

그 후 chapter04 폴더 내 Component01.jsx 파일을 추가하고 아래 코드를 추가하자

 

<< 기본 값이 들어있는 입력 폼 >>

1. 한 줄 입력

  간단하게 한 줄로 입력할 수 있는 input 태그의 경우 HTML과 동일하게 value 속성을 사용해서 기본값을 가지고 있는 한 줄 입력 폼을 구성할 수 있음

 

2. 여러 줄 입력

  여러 줄로 입력할 수 있는 textarea 태그의 경우 HTML과 다르게 value 속성을 사용해서 기본값을 가지고 있는 여러 줄 입력 폼을 구성할 수 있음

 

한 줄, 여러 줄 입력 시 당연히 JSX를 사용할 수 있음

여기서 주의할 점은 위와 같이 기본값을 갖도록 하면 기본값을 갖긴 하지만 입력을 할 수는 없음

위와 같이 컴포넌트를 수정 한 후 출력해 확인해보자

이를 활용하면 회원 정보 수정 시 아이디는 바꿀 수 없게 만들 수 있음

 

기본값도 가지면서 입력을 허용하려면 useState 훅과 onChange 이벤트 핸들러를 사용해야함

 

3. 체크박스, 라디오버튼

  체크박스와 라디오 버튼의 경우 HTML과 동일하게 checked 속성을 사용해 기본값이 체크되도록 할 수 있음

역시나 체크박스와 라디오 버튼을 위와 같이 설정한다면 체크를 풀 수 없는 상태가 됨

기본값이 체크된 상태로 다른 항목이 체크 되도록 하려면 useState 훅과 onChange 이벤트 핸들러를 사용해야함

또한 조건부 렌더링도 함께 사용해야함

 

체크박스와 라디오 버튼의 경우 다른 항목이 체크 되도록 하는 방식이 다르니 따로 보자

3-1. 체크박스가 기본값을 체크하면서 다른 항목도 체크하도록 만들고 싶을 때

  체크 박스가 기본값을 체크하면서 다른 항목도 체크하도록 만들고 싶을 때는 체크 박스의 각 항목별 상태를 저장할 변수를 선언(1)해야함

체크 박스는 체크했음(ture), 체크안했음(false)으로 핸들링 할 수 있으니 기본값을 체크하기 위해서 기본값의 상태를 저장할 변수에 true를 저장하고 나머지 항목들은 false를 저장하면 됨

체크 박스에서는 checked 속성을 통해 기본값을 체크하도록 핸들링할 수 있음(2)

또한 체크 박스의 체크 상태가 변했을 때 호출할 함수를 이벤트 핸들러로 등록해야함(2)

체크 박스의 체크 상태가 변했을 때 setter 함수를 사용해 체크 상태를 저장(3) 하도록 하면 기본값이 체크 된 상태로 다른 항목들도 체크할 수 있음

 

3-2. 라디오 버튼이 기본값을 체크하면서 다른 항목을 체크하도록 만들고 싶을 때

  라디오 버튼은 항목 중 하나를 선택하는 버튼이므로 기본값 또는 현재 선택한 항목의 값을 저장하기 위해 변수를 하나만 선언함(1)

라디오 버튼 역시 체크박스처럼 checked 속성을 통해 기본값을 체크하도록 핸들링할 수 있음(2)

또한 라디오 버튼의 체크 상태가 변했을 때 호출할 함수를 이벤트 핸들러로 등록해야함(2)

체크박스의 상태가 변했을 때 체크한 항목의 값으로 변경하도록 함(3)

 

4. select

select 의 경우 HTML과 동일하게 value 속성을 사용해서 기본값이 체크되도록 할 수 있음

단, 지금까지 봐온것처럼 위와 같이 한다면 기본값을 바꿀 수 없음

select의 기본 값을 바꾸도록 하려면 useState 훅과 onChange 이벤트 핸들러를 사용해야함

 

각 입력 폼의 기본값 설정 방법과 값을 바꿀 때 설정 방법들이 비슷한듯 다르니 잘 기억해두기