04. 상태관리(state)

 

 

# What? 뭔데 이게?

- 컴포넌트가 갖는 상태

 

# Why? 왜 배우는데?

- 데이터 변경됨에 따라 컴포넌트 모습이 변하길 원한다면 state를 사용해야함.

(in-diary.com 일기장 생성을 예시로 보여드리자)

# How? 어떻게 쓰는데?

- state 변수를 선언하고, 변경하기

* 배열값 초기화 쉽게 하는 방법 알고가기

- 바나나, 사과, 블루베리의 당도를 담고 있는 배열이 있고 이 당도들을 각각의 과일 변수에 나눠 담고 싶을 때.

 

1) 기존 방식

let sweats = [50, 30, 100]; // 바나나, 사과, 블루베리순으로 당도값이 담겨 있다고 가정
let banana = sweats[0];
let apple = sweats[1];
let blueberry = sweats[2];

2) 개선된 방식

let [banana, apple, blueberry] = swaets;

 

1. useState

• state 변수를 만들 때는 useState라는 함수를 사용
• useState(state 초기값) 형태로 사용하며 state 초기값을 받아, [state, setState(state 변경함수)] 배열을 반환한다. 

let [name, setName] = useState("형준"); // [state, setState]
// name의 초기값은 "형준"으로 설정되어있고 이 값을 바꾸고싶으면
// setName("바꾼이름")과 같이 바꾸면 됨.
// 이러면 name이 변경되고, name이 변경됨에 따라 화면도 바뀐 name을 잘 보여준다.

2. setState

• state값을 변경하는 함수
• setState 없이는 state값을 바꾸고 나서 직접 component update를 해줘야 state값에 따라 컴포넌트 모습도 변경되지만 setState는 이 두 가지를 한방에 해결해줌.(setState에 update 과정이 내포되어있음)
• setState는 비동기 함수

let [name, setName] = useState("형준");

setName("철수");

console.log(name); // "형준"
// ?? console 바로 찍어보면 "철수"로 변해있어야하는거 아닌가?
// name이 변하는건 맞음, 하지만 setName은 비동기 함수이기 때문에
// name 변환 될 때까지 기다렸다가 다음 코드를 실행하는게 아니고, name 변환이 완료되던말던
// name 변환 요청 보내놓고 바로 다음 코드로 넘어가버림

3. useEffect

용도 1. 생성자

  컴포넌트가 렌더링 된 다음에 실행하고싶은 내용들을 useEffect라는 곳에 적으면 된다.(컴포넌트 생성자 같은 느낌, 해당 페이지가 열리고 바로 실행됐으면 하는 일들을 적으면 됨)

ex. useEffect(() => {

  console.log("테스트");

}, [])

 

용도 2. state값 변경에 따른 반응

  어떤 state값이 변할 때 특정 행동을 하고싶을때도 useEffect라는 곳에 적으면 된다.

ex. useEffect(() => {

  console.log("해당 state값이 변경됐어요");

}, [state])

 

# Practice 연습

1. 카운팅하면서 카운트값이 변경됨을 화면으로 관찰해보기(onClick은 다음 시간에 더 자세히 배울 예정)

 

@ App.js

import React from 'react';
import Counter from './Counter';

function App() {
	return (
		<div className="App">
			<Counter />
		</div>
	);
}

export default App;

@ Counter.jsx

import React, {useState} from 'react';

const Counter = () => {

	let [count, setCount] = useState(0);

	let normalCount = 0;

	const increase = () => {
		setCount(count + 1);

		normalCount = normalCount + 1;
	};

	const decrease = () => {
		setCount(count - 1);

		normalCount = normalCount - 1;
	};

	return (
		<div>
			<div>
				state를 쓴 카운트 : {count}
			</div>

			<div>
				state를 안 쓴 카운트 : {normalCount}
			</div>

			<button onClick={increase}>증가</button>
			<button onClick={decrease}>감소</button>
		</div>
	);
};

export default Counter;

 

* 삼항연산자 (어떤 조건 ? 조건이 true일 경우 : 조건이 false일 경우

import React, {useState} from 'react';

const Counter = () => {

	let [createMode, setCreateMode] = useState(false);

	return (
		<div>
			{createMode ? "지금은 생성 모드야" : "지금은 생성 모드 아냐"}
		</div>
	);
};

export default Counter;

# Problem 과제

휴식 클릭 시 -> 열일, 열일 클릭 시 -> 휴식으로 변경되게 만들어보기

 

 

* 소스참고: https://github.com/ShinHyungJune/react-course/tree/course-4-state