State 관리 - 클래스형 컴포넌트

728x90

1. 단방향 데이터 흐름이란?

이말은 데이터는 위에서 아래로 넘겨줘야한다. (부모 → 자식)

예를들어, state가 업데이트되면 부모에서 자식 컴포넌트로 리랜더링 된다. 만약에 자식 컴포넌트의 state가 업데이트되서 부모 컴포넌트가 props를 받는다고하면 다시 자식컴포넌트로 리랜더링 될거다.

이렇게되면은 데이터 흐름상 불필요한 과정들이 많아지기떄문에 데이터는 단방향으로 넘겨줘야한다.

2. 클래스형 컴포넌트에서 state 관리 - setState()

클래스형 컴포넌트의 state를 업데이트 할떄 사용하는게 setState() 함수다.

위와같이 간단한 예제를 통해서 state를 어떻게 관리하는지에 대해 알아보자!

※ 실습 순서

1. 새로운 CRA 만들어 실습해보자.

→ yarn create react-app nemo

2. App.js 를 클래스형 컴포넌트 기본형태로 수정하여 세팅!

3. state에 count라는 변수를 추가하고, count 숫자만큼 네모칸을 화면에 띄우기

Array.from() - JavaScript | MDN

Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다.

developer.mozilla.org

state에 count라는 변수에 들어있는 숫자만큼 네모칸을 만드는 방법이며, Array.form() 개념 및 사용방법에 대해서도 알아두자!

(Array.from()은 배열을 만들고 초기화까지 해주는 내장 함수)

4. 더하기/빼기 버튼을 만들어서 함수를 통해 기능을 만들어보자

우선 기존 코드에 간단한 버튼을 만들어주고 함수를 통해 기능만 완성해보자.

addNemo 는 함수가 실행할때마다 state에 count를 1씩 더해준다.

그렇게되면은 state에 저장된 count 가 늘어나기떄문에 화면에 띄워준 네모도 늘어나게된다!

removeNemo 는 함수가 실행되면은 count가 0보다 큰 경우에만 -1을 해주도록 하는것이며,

만약 count가 0일 경우에는 얼럿을 띄워준다.

마지막으로, 버튼에 onClick 으로 함수가 실행될 수 있도록 연결해주면 끝!

K-CodingStory