[CRUD] #1 useState를 활용해 Input 구현

#0 최종 목표 : React로 게시판 구현하기

#1 React의 useState를 사용하여 입력 기능의 프로토타입을 구현한다.

 

결과물

 

1. useState란?

배열을 리턴해주는 함수

state라는 변수를 변경하므로서 컴포넌트에 작업요청을 진행한다.

== 화면을 다시 그려준다.

 

기본 구조

state : 컴포넌트 랜더링(컴포넌트에 작업요청)을 할 수 있는 변수

setState : state를 변경시키는 함수

value : state의 초기값

 

 

2. 기본 구현

구현 목표는 input 칸 두개에서 입력을 받고 화면에 바로 보여주는 것과 초기화 버튼이다.

우선 useState로 2개의 입력할 변수를 선언해둔다.

useState로 title, contents에 대한 변수를 선언해둔다.

 

useState의 setState함수가 불러와지는 경우 state는 변경된다.

Title와 Contents의 입력, Reset 기능의 구현을 각각 새로운 변수로 구현해주자. 

e.target.value로 setState가 변경됨 == 입력한 값으로 State가 변경됨

이제 return에서 html 문서를 작성하듯 내용을 적어주면 완성이다.

 

BoardInputs2.js

작성한 BoardInputs2를 App.js에 넣어주면 정상작동하는 것을 볼 수 있다.

 

App.js

 

 

 

3. 비구조화 할당 (구조분해)

 

하지만 위의 방식은 Input이 늘어나면 하나하나 useState를 선언하고 변수명을 따로 정해야하는 불편함이 있다.

이를 고치기 위해 비구조화 할당을 이용해서 만들어보자. + key-value 형태 사용

 

BoardInputs.js            // App.js 에도 BoardInputs2 를 BoardInputs으로 변경

수정한 이 방식은 당장은 코드가 더 길어진 것 처럼 보일 수 있으나 직관적이고 Input의 갯수가 늘어나도 추가하기 매우 쉽다.

 

바뀐 점을 요약하자면

 

1. useState를 Input 하나로 통일하고 객체를 이용하여 작성하였다.

 

2. 비구조화 할당을 사용해 Inputs에 title와 contents를 넣어준다.

※ 비구조화 할당이란 객체 내부의 값들을 추출해서 새로운 상수에 선언해주는 것이다.

    새로운 input이 생겨도 새로 useState 선언할 필요 없이 객체 값만 추가해주면 된다.

 

3. 입력 값의 name을 key 값으로 지정하여 각 입력값을 구분해준다.

 

※ return의 변경은 위의 값 변경으로 인해 바뀐 것이므로 언급하지 않았다.

 

 

새로운 방식은 이전보다 코드가 직관적이고 확장성이 좋다.

useState를 사용할 때 동일한 작업을 한다면 이처럼 작성하는 것이 효율적이다.