React/ part.3 state

state

이번 글에서는 이전 글인 hook 과 props에 이어 state에 대한 내용을 다룹니다.

링크를 통해 바로 해당 글로 이동이 가능합니다.

또한 react에 관련된 글은 해당 카테고리로 올라가 있습니다.

 

---

1. state란?

컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값?

⇒ 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값

컴포넌트 내부에서 가지고 있는 상태값 ⇒ 부모 컴포넌트와 상관없이

 

useState라는 내장 hook을 사용함

(주석으로 추가적인 설명을 달아두었습니다. 참고해주세요)

import React, { useState } from 'react';

const Main = () => {
  const = [state, setState] = useState(); // hook이기 때문에 최상단에 호출
 // const [매개변수1, 매개변수2] = useState(값 할당)
  return <h1>여기는 메인페이지입니다.</h1>;
};

export default Main

 

 

2. state의 구조

 

useState는 함수 ⇒ 반환 값으로 두 가지 값이 담긴 배열을 반환

⇒ 구조분해할당(배열구조 분해 할당)을 통해 각각의 변수에 반환 값을 담는다.

 

 

state (첫 번째 요소) 

동적으로 관리하고자 하는 상태 값

⇒ useState()의 인자값을 받는다.

 

setState (두 번째 요소)

첫 번째 요소인 상태값을 업데이트 하는 함수

매개 변수2는 무조건 set으로 시작 (컨벤션)

⇒ state를 초기값에서 다른 값으로 변경하고 싶다면 setState를 통해 변경

 

import React, { useState } from 'react';

const Main = () => {
  const [color, setColor] = useState('red');

  return (
    <>
      <h1 style={{ backgroundColor: color }}>여기는 메인페이지입니다.</h1>
      <button onClick={() => setColor('blue')}>색상 바꾸기</button>
    </>
  );
};

export default Main;

 

 

아래의 코드를 다시 설명하면

<button onClick={() => setColor('blue')}>색상 바꾸기</button>

 

이벤트 = { () ⇒ setState(’변경할 값’) } 함수 실행하듯이

 

 

3. setState를 이용하는 이유

이벤트가 실행 될 경우,

업데이트한 값으로 다시 랜더링 실행한다.

 

setState 변경 사항만 인식해서 리랜더링하기 때문에 화면 전체를 다시 랜더링 하는 불필요한 과정이 줄어든다.

 

그냥 state에 값을 바로 할당 할 경우 값은 변경되지만 화면에 출력되진 않는다

=> 리액트는 setstate가 바뀔 때만 변경되는걸로 인식하기 때문이다. 

 

 

 

4. state 끌어올리기

단방향성

한 (위에서 아래로) 방향으로만 데이터가 흐른다.

부모→ 자식은 가능하지만 자식 → 부모는 안된다.

 

부모와 자식 모두 사용하는 state의 경우 부모에서 선언하고 자식으로 보내준다.

자식은 부모로부터 값은 받을 수 있지만 그 값 자체를 자식이 수정할 수는 없다.

setstate를 다른 함수로 바꿀 수는 없고 setstate 자체를 넘길 경우 그 함수를 실행 할 수는 있다.

 

 

 

만약 부모 컴포넌트에서 state를 선언하고, 자식이 props로 값을 받아 이벤트를 실행할 경우

 

setstate(변경될 값)를 실행하는 함수를 부모에서 props로 자식 컴포넌트에게 넘겨준다.

받은 props(setstate함수를 실행하는 함수)로 자식 컴포넌트에서 이벤트를 실행한다.

이를 통해 부모에게 선언되어 있는 state 값을 변경하고

다시 자식으로 돌아온다

 

과정을 다시 정리해보면,

 

부모 컴포넌트에서 setstate (변경값을 포함하는)함수를 실행하는 props를 자식 컴포넌트로 보냄

→

자식 컴포넌트에서 이벤트 발생 

→

부모로부터 받은 setstate값을 변경하는 함수를 실행

→

부모 컴포넌트에서 state값 변경

→

다시 자식 컴포넌트로 변경된 값 보내기

→

자식 컴포넌트의 해당 요소 변경

 

 

+

형제 컴포넌트끼리 값을 전달할 때

그리고 형제 요소끼리 값을 받을 때에도 부모 요소에 state를 선언하고

각각의 자식 요소에게 값을 전달하는 방식을 사용해야한다.

형제 컴포넌트끼리는 바로 전달할 수 없다.

 

 

 

---

잘못된 정보가 있다면 댓글로 피드백주세요. 확인 후 수정하겠습니다^-^

더 정확한 정보 혹은 더 효율적인 방식이 있을 경우 댓글로 의견을 공유해주세요!