코드스테이츠 SEB 20일차 TIL - 리액트 state & props

벌써 부트캠프를 일정을 시작하고 4주나 되었다... 아니 시간 도대체 무슨일? 정말 시간이 정신 없는 듯이 흘러간 것 같은데 정신차려보니 내가 어느새 프레임워크를 만지고 있다? 아주 기가 막힌 경우다. 이번 주에 처음만난 리액트도 계속 보다보니 어느새 익숙해져가고 있는 현실이 굉장히 무섭다.

 

오늘은 리액트의 주요 개념인 state와 props에 관해 학습을 하였고 이를 활용하여 리액트 내에서 이들을 적용하여 실습하는 시간을 가져보앗다.

 

---

State

state는 컴포넌트 사용 중 컴포넌트에서 변할 수 있는 값을 의미한다. 이런 간단한 정의를 생각해보면 그냥 변수 아니야? 라고 생각될 수도 있다. 변수랑은 다른 부분이 엄연히 존재하지만 컴포넌트 내에서는 변수를 사용하기보다는 state를 사용하는 것이 더욱 권장된다. 아직까지 많은 코드를 살펴본 것은 아니지만 주로 원시자료형 혹은 참조자료형 배열, 객체에서 사용되는 것을 주로 보았다. 함수는 그냥 변수 선언하긴 했다. 차이점을 살펴보기 위해서는 우선 다음과 같은 state 선언 및 할당 방법을 봐야한다.

 

const [currentPage, setCurrentPage] = useState('main');

 

위와 같이 useState를 통해서 괄호 안에 있는 할당 값이 좌측의 currentPage에 할당된다. 그리고 setCurrentPage는 currentPage라는 변수의 값을 바꿀 수 있는 함수로서의 기능을 한다. 위의 코드대로라면 currentPage에는 'main'이라는 값이 할당되는데 이를 'help'로 바꾸려고 하면 setCurrentPage("help")로 함수를 호출하여 currentPage의 값을 바꿀 수 있는 것이다.

 

그리고 위 코드에서 좌측 변수에 값을 할당하는 방식에는 구조 분해 할당 이라는 개념이 적용된 것이다. 자세한 내용은 mdn에 좋은 예시들로 구성되어 있어 이해하기에는 mdn에 있는 문서를 참고하는 것이 바람직하다. 간단하게 보면 위 코드와 같이 우측 할당 값의 내용이 단순한 원시자료형의 내용이 아니라 참조자료형의 배열, 객체와 같이 복수의 내용을 각각 다른 변수에 할당하고자 할 때 활용할 수 있는 개념이다. 위와 같이 되면 순차적으로 좌측 변수부터 우측 할당 값의 첫번째 내용이 할당된다.

 

 

One-way Flow & Top-down

one-way flow 즉 단방향 데이터 흐름이란 리액트에서의 데이터 흐름 속성을 의미한다. 한마디로 리액트의 데이터가 흘러가는 구조는 일방통행이란 뜻이다. 그리고 데이터를 전달하는 주체는 부모 컴포넌트이며 이를 수용하는 것은 자식 컴포넌트가 된다. 위에서 아래로 내려가는 Top-down방식이다. 정리해보면 리액트에서의 데이터는 일방향(one-way flow)와 하향식(top-down)으로 이루어진다고 말할 수 있다. 

 

예시로 리액트에서 root 컴포넌트에 자식으로 있는 특정 컴포넌트가 발생된 데이터를 root에게 전달하는 경우는 상향식으로 위의 데이터 흐름에 맞지 않다. 그리고 root는 자식에게 데이터를 받고 얼씨구나하면서 마찬가지로 자식에게 데이터를 또 전달하는 양방향 흐름은 성립이 불가하다.

 

 

Props

state야 그냥 기존에 변수나 함수를 사용하는 원리로 간단하게 이해가 가능하지만 props는 사용법만 처음에 보면 뭔가 더욱 이해할 수 없는 수렁으로 사람을 끌고가는 맛이 있다. 그런데 간단히 생각을 해보자면 위에서 언급한 리액트의 데이터 흐름을 생각해봤을 때 컴포넌트 간에 데이터를 전달해주는 브릿지 역할을 해주는 것이 props라고 생각할 수 있다.

 

import "./App.css";
import Section from "./Pages/Section.js";

function App() {
  return (
    <div className="App">
      <div>
        <Section time={10} />
      <div>
    </div>
  );
}

export default App;

 

 

위와 같은 한개의 부모 컴포넌트가 있다고 할 때 위 코드 속의 컴포넌트는 자식 컴포넌트 Section을 가지고 있다. 그리고 Section 컴포넌트에게 time={10} 이라는 데이터를 전달하고 있다. 그리고 저 데이터를 전달 받는 자식 컴포넌트는 다음과 같은 방법으로 위의 데이터를 받을 수 있다.

 

import "./Section.css";

const Section = (props) => {
  const { time } = props;

  return (
    <div>
      <div>
        <nav>Hello: {time}</nav>
      </div>
    </div>
  );
};

export default Section;

 

위 코드는 자식 컴포넌트로 함수 컴포넌트인 자식 컴포넌트의 매개변수 자리에는 props라는 매개변수가 있고 그 매개변수를 time 이라는 변수에 할당하여 그 부분을 아래에서 활용하는 것을 볼 수 있다. 위 코드를 브라우저 상에서 구현하면 아래와 같다.

 

 

살펴본 것 같이 props를 통하여 컴포넌트 간에 데이터를 전달하기 위해서는 전달 받고자 하는 컴포넌트는 우선 다른 컴포넌트 속의 자식 컴포넌트로 구현되어야 한다. 그렇기에 일방향으로 데이터 전달만이 가능해지는 것으로 생각되어진다.