(7-1) React - input태그 만들기 예제

국비과정을 통해 배운 내용을 복습하는 용도로 제작하였습니다.작성방식이 미숙하여 이미지 캡처로 소개한 점 양해 부탁드리겠습니다..

 

소스코드는 깃허브 URL에 공개해 두었습니다. 

https://github.com/awse2050/ReactTodo

 

 

안녕하세요. 오늘은 리액트를 사용함에 있어서 todoList를 만드는 것이 첫 단계라고 생각합니다.

첫 단계에 들어가기에 앞서서 기존 HTML에서 사용되는 input 태그와 다르게 리액트에서 사용되는

input 태그는 좀 다르게 작동하기 때문에 todoList를 만들기 위해 꼭 알아야 하는 부분입니다..

계획한 순서에 맞춰서 포스팅하겠습니다.!!

 

 

1. 먼저 src - Component 폴더에 새로운 폴더인 'Sample' 폴더를  만들겠습니다. 

2. 이후 index.js 파일을 만드시고 다음과 같이 간단하게 기본양식을 작성했습니다.

이 파일을 일부러 작성한 이유는 다른 컴포넌트들과 관련을 시킬 것임과 동시에

App.js - index.js -( 다른 컴포넌트들 ) 처럼  컴포넌트 간의 상하관계를 맺기 위함입니다.

3. 이후 Ex1.js를 만드시고 이 파일에는 실습하기 위한 input태그를  생성시켜둡니다. 

4.  이후 하단의 2개의 화면에 보시는 index.js에서  Ex1 컴포넌트를 리턴하고

App.js에서는 Ex1 컴포넌트를 리턴하는 Sample 컴포넌트를 리턴시키게 한 후 결과를 봅니다.

5. 아래와 같이 input태그를 바꾸고 싶다면 이벤트 핸들러 'onChange' 나 기본값 설정 , readOnly를 

설정해야 한다고 에러가 나타납니다. 

기존 HTML과 다르게 value값이 변할수 없게 만들어져 있는데요.

왜냐하면, 리액트의 사상이 이 DOM을 전체 렌더링을 하게 되면 더 이상 변경이 불가능한 상태가 됩니다.

그래서 다시 렌더링이 되게끔 하기 위해 상태를 변경할 수 있게 도와주는 역할을 하는 녀석이 필요합니다.

그게 useState라는 Hook을 이용하는 것입니다. 

 

6. 다음과 같이 useState를 import 해주신 다음 상태를 변경하기 위한 const를 선언합니다.

useState를 만드실 때는 반드시 2번처럼 배열 형식으로 변수와 setter를 선언하셔야 하고요.

useState의 기본값으로 공백을 넣어서 "useState('')"로 설정하였습니다.

Value값 또한 {text}로 변경 이후 onChange 이벤트를 걸어서 4번과 같이 setter를 사용해 설정해줍니다.

7. 설정한 후 웹 페이지를 가면 아래와 같이 직접 변경할 수 있는 것을 확인할 수 있습니다. 

8. 이후 Button 태그를 하나 만들어서 클릭하면 props 형태의 text값과 변수 text값을 

콘솔 창에서 볼 수 있도록 설정합니다.

이 예제에서는 직접 이 컴포넌트에 text값을 콘솔로 도출시켰지만

다음 예제에서는 다른 컴포넌트에서 props를 통해 사용하도록 응용시키려 합니다.

9. 웹페이지에서 입력 후 클릭을 하시면 아래와 같이 콘솔 창에 나타나는 것을 확인하실 수 있습니다.

 

Input태그를 작성함에 있어서 기억해야 할 점은 2가지입니다. 

useState의 사용

onChange 이벤트 사용

이 2가지를 사용하는 것이 input 태그를 이용하는 표준방법입니다.