📌 목차

✨ React 2022년 개정판

💁🏻

1. 수업 소개
2. 실습 환경 구축
3. 소스코드 수정방법
4. 컴포넌트 만들기
5. props
6. 이벤트
7. state
8. Create
9. Update
10. Delete & 수업을 마치며

---

state

컴포넌트

prop을 통해서 입력된 데이터를 컴포넌트 함수가 처리해서 return값을 만들면
바로 그 리턴 값이 새로운 ui가 된다.

state

prop과 함께,컴포넌트 함수를 다시 실행시켜 새로운 리턴 값을 만들어주는 또 하나의 데이터가
있는데 바로 state다.

• prop: 컴포넌트를 사용하는 외부자를 위한 데이터
• state: 컴포넌트를 만드는 내부자를 위한 데이터

state 사용법

1. import {useState} from React; 를 해서 useState훅을 사용해야한다. 훅(hook)은 리액트에서 제공하는 기본적인 함수.

2. 함수 안의 지역변수를 state로 업그레이드한다. const mode = 'WELCOME';을
   const _mode = useState('WELCOME');으로 바꾸면<br/> 'WELCOME'이라는 상태를 가진 _mode`가 된다. console.log('_mode',_mode)를 해서 _mode를 출력해보면
   useState는 상태를 배열로 리턴해서
   0번째 원소는 상태의 값을 읽을 때 쓰는 데이터,
   1번째 원소는 그 상태의 값을 변경할 때 쓰는 함수가 나온다.
   state의 값을 바꿀 때는 1번째 원소의 함수를 통해 상태값을 바꿀 수 있다는 뜻이다.

   const _mode = useState('WELCOME');
   const mode = mode[0];
   const setMode = mode[1];
   //위의 세 줄은 밑의 코드 한 줄과 같은 의미
   const [mode, setMode] = useState('WELCOME');