오늘은 리액트를 통해 어떻게 데이터를 다루어 지는지에 대해 정리하고자 합니다. 데이터 흐름을 이해하기 위해서는 State와 Props라는 개념을 알아야 합니다.
State
State는 컴포넌트 내부에 존재하는 변경이 가능한 값 입니다. 원하는 로직에 따라 State값을 변경하여 화면에 렌더링할 수 있습니다. React에서는 state 를 다루는 방법 중 하나로 useState 라는 함수(Hook) 제공합니다. Hook은 리액트 16.8버전에 새로 추가되었으며, Hook은 함수형 컴포넌트에서 state 값을 다룰 수 있습니다.
// useState는 state를 저장할 변수와 state 값을 지정할 수 있는 함수를 리턴합니다.
const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값); // 구조분해 할당을 이용하여 배열을 생성합니다.import { useState } from "react"; //import 키워드를 이용하여 useState를 불러옵니다.
const [count, setCount] = useState(0); // state 초기값을 0으로 설정합니다.
return (
<div>
<p>You clicked {count} times</p> // count값 렌더링( 초기 : 0 -> 클릭 1회 -> 1 -> 클릭 2회 -> 2 ...)
<button onClick={() => setCount(count + 1)}> // 버튼을 클릭할 때마다 setCount 함수가 count 값을 1씩 증가 시킵니다.
Click me
</button>
</div>
);
}
Props
React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있습니다.
Props 특징
- 컴포넌트의 속성(property)을 의미합니다.
- 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다.
- 객체 형태입니다.
- props는 읽기 전용입니다.
사용방법
Props는 부모 컴포넌트를 정의할 때, 자식요소의 컴포넌트의 속성으로 정의하여 전달이 가능합니다. 다른 방법으로는 자식요소의 여는 태그와 닫는 태그 사이에 값을 넣어 전달할 수도 있습니다.
- 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
- props를 이용하여 정의된 값과 속성을 전달한다.
- 전달받은 props를 렌더링한다.
function Parent() {
return (
<div className="parent">
<h1>I'm the parent</h1>
<Child text={"I'm the eldest child"}> 저는 childeren 입니다. <Child> // text라는 속성 전달합니다.
</div>
);
};
function Child(props) { // 부모 컴포넌트가 전달한 props를 전달인자로 받습니다.
return (
<div className="child"></div>
<h1>{props.text}</p> // 전달받은 props의 text라는 속성을 렌더링 // "I'm the eldest child"
<h1>{props.children}</p> // 전달받은 props의 text라는 속성을 렌더링 // "저는 childeren 입니다."
);
};리액트 데이터 흐름
리액트를 통해 프로젝트를 진행할 때는 우선 기능별로 컴포넌트를 제작하고 컴포넌트를 조립해 페이지를 만들어나가는 상향식(Bottom-up) 개발 방식을 사용합니다. 이 방법은 테스트가 쉽고 확장성이 좋습니다. 필요한 컴포넌트를 제작하고 트리 구조로 나타내고 나면 데이터를 어떻게 처리해야할지 결정해야합니다.
우선 자식 컴포넌트는 부모 컴포넌트로 부터 Props를 통해 데이터를 전달받을 수 있습니다. 이는 데이트 흐름이 하향식(Top-down)임을 의미합니다.이렇게 리액트에서는 데이터가 하향식으로 흐르는 단방향 데이터 흐름(One-way data flow)을 가지고 있습니다.
리액트에서는 외부에서 전달되는 Props 뿐만 아니라 내부에서 값이 변하는 State도 관리해야합니다. State의 생성은 최소화하여 어플리케이션의 복잡도를 줄이는 것이 좋습니다. State를 관리하다보면 두 컴포넌트에 공통적으로 적용되는 State가 존재할 수 있습니다. 이런 경우에는 어떻게 해야할까요? 이런 경우에는 공통의 부모 컴포넌트에 State 값을 위치시키고 관리할 수 있습니다.
리액트에서는 데이터 흐름을 고려하여 Props와 State를 적절하게 사용해야 보다 효율적이고 가독성 좋은 코드를 만들 수 있습니다.
