[React] 리액트 기초 개념 컴포넌트/JSX/Props/State

리액트를 공부하는 첫 날이다! 기대된다.

1. 컴포넌트란?

재사용할수 있는 조립 블록.
화면에 나타나는 UI 요소라고 생각하면 이해하기 쉽다. 

단순히 UI 역할 뿐만 아니라 부모로부터 받은 속성(props)이나 자신의 상태(state)에 따라 표현이 달라지고 다양한 기능을 수행한다. 리액트는 데이터와 UI 요소의 집합체라고 할 수 있는 컴포넌트를 이용하여 화면을 구성하게 된다.

2. JSX 

객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능으로 리액트 프로젝트에서 사용된다.
JSX는 가독성이 높고 작성하기도 쉬우며 XML과 유사하다는 점에서 중첩된 구조를 잘 나타낼 수 있다는 장점이 있다.

*JSX에서 여러개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야한다. 

위와 같이 작성하면

다음과 같은 오류가 발생한다. return 값 즉 반환하는 값이 하나가 아니어서 발생하는 오류이다.

이럴 땐 <div> ~ </div> 와 같이 하나의 부모로 묶어서 반환해주면 오류가 해결된다.

3. props

props란 properties를 줄인 표현으로, 부모 컴포넌트로부터 전달된 속성값 혹은 상속받은 속성 값을 말한다.
== 부모 컴포넌트로부터 받아온 데이터
부모 컴포넌트가 자식 컴포넌트의 props를 설정하면 자식 컴포넌트에서는 해당 props를 사용할 수 있지만 변경하는 것은 불가능하다. props의 변경이 필요한 경우 props를 설정 및 전달한 부모 컴포넌트에서 변경해야 한다.

// src/App.js

import React from "react";

function App() {
  return <GrandFather />;
}

function GrandFather() {
  return <Mother />;
}

function Mother() {
  const name = '홍부인';
  return <Child />;
}

function Child() {
  return <div>연결 성공</div>;
}

export default App;

결과화면

4. props로 값 전달하기

import React from "react";

// div안에서 { } 를 쓰고 props.motherName을 넣어보세요.
function Child(props) {
  return <div>{props.motherName}</div>;
}

function Mother() {
  const name = "홍부인";
  return <Child motherName={name} />;
}

function GrandFather() {
  return <Mother />;
}

function App() {
  return <GrandFather />;
}

export default App;

결과화면

• props란 결국 부모 컴포넌트가 자식에게 넘겨준 데이터들의 묶음이라고 볼 수 있다.
• 이렇게 리액트에서는 Props를 통해 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 넘겨줄 수 있다.

 

5. prop Drilling이란?

props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정

(예시코드)

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <FirstComponent content="Who needs me?" />
    </div>
  );
}

function FirstComponent({ content }) {
  return (
    <div>
      <h3>I am the first component</h3>;
      <SecondComponent content={content} />|
    </div>
  );
}

function SecondComponent({ content }) {
  return (
    <div>
      <h3>I am the second component</h3>;
      <ThirdComponent content={content} />
    </div>
  );
}

function ThirdComponent({ content }) {
  return (
    <div>
      <h3>I am the third component</h3>;
      <ComponentNeedingProps content={content} />
    </div>
  );
}

function ComponentNeedingProps({ content }) {
  return <h3>{content}</h3>;
}

content 를 App > First > Second > Third > ComponentNeedingProps 순으로 전달한다.

ComponentNeedingProps 컴포넌트에서 해당 props를 사용하기 위해 전달하는 과정을 거치게 된다.

(이렇게 App부터 ComponentNeedingProps까지 props가 파고드는 모양새여서 prop drilling이라고 부르나봐요)

 

prop전달이 3~5개 정도라면 Prop Drilling 자체는 문제가 되지 않지만
prop전달이 10개 이상이라면? 코드를 읽을 때 prop 추적이 힘들어지고 그렇기 때문에 유지보수가 어려워진다.

이를 해결하기 위해서는 전역 상태관리 라이브러리를 사용한다.
redux, MobX, recoil 등을 사용하여 해당 값이 필요한 컴포넌트에서 직접 불러서 사용할 수 있다.

6. state

props는 부모 컴포넌트에서 받은 값으로 변경할 수 없는 반면,
state는 컴포넌트 내부에서 생성되고 값을 변경할 수 있으며 이를 이용해 컴포넌트 상태를 관리한다.
상태(state)란 컴포넌트에서 변화할 수 있는 값을 나타내며, 상태가 변하면 컴포넌트는 리렌더링 된다.

7. useState

const [state, setState] = useState(initialState);

리액트 Hooks(기능) 중 useState는 함수형 컴포넌트에서 상태를 관리할 수 있도록 해준다.
상태를 관리하는 변수와 그 변수를 변경할 수 있는 setter 함수를 배열로 반환한다.
useState 함수를 호출할 때 파라미터에 생서되는 상태의 초기값을 전달할 수 있고 초기값을 전달하지 않으면 undefined로 설정되어 에러가 발생할 수 있으므로 항상 초기값을 설정하는 것이 좋다.