[NextJS - 2] React의 Core Concepts(Components, Props, State)

이전 글에 이어서, 이번에는 React의 Core Conept들과 이를 어떻게 이용하고 있는지 알아보자.

 

React의 Core Concepts

• Components
• Props
• State

 

---

Components

아래 사진 처럼 유저 인터페이스는 작은 단위의 블락(so called Components)로 쪼갤 수 있다. 

 

이러한 모듈성은, 컴포넌트를 추가, 수정, 삭제할 때 application의 다른 부분은 수정할 필요 없이, 아주 쉽게 유지 보수 할 수 있게 만듦으로써 유지보수성을 높여준다.

 

 

이러한 컴포넌트는 어떻게 만들 수 있을까?

리액트에서는 components는 함수이다. script 태그의 안쪽에서 header라는 함수를 작성하고, JSX를 이용하여 원하는 UI elements를 리턴해주자. 

그리고 우리가 방금 만든 header라는 컴포넌트를 DOM에 렌더하기 위해서 "ReactDOM.render()"메소드에 전달 해주자. 

아래 코드를 살펴보자.

    <script type="text/jsx">

      const app = document.getElementById("app")

      function Header() {
         return (<h1>Develop. Preview. Ship. 🚀</h1>)
       }

       ReactDOM.render(<Header/>, app)
    </script>

 

여기에서 주의 할 점은 두 가지 이다.

 

• 첫 번째로, React의 컴포넌트는 항상 대문자로 시작해야 한다는 점이다. (header가 아닌, Header로 컴포넌트를 만들어야 하는 이유)
• 두 번째로, React의 컴포넌트는 <>(angle brackets)안에 넣어서 사용해야 한다는 점이다. (<Header/> 로 사용하는 이유)

 

 

컴포넌트안에 컴포넌트 넣기(Nesting Components)

앞서 살펴본 것 처럼, 하나의 application은 다양한 components들의 집합이다. 즉, 여러개의 컴포넌트들을 조합할 필요가 있다는 것이다. 그럼, 어떻게 하나의 컴포넌트 안에 다른 컴포넌트를 넣을 수 있는지 알아보자. 

방법은 매우 간단하다. 아래처럼, 함수(새로운 컴포넌트)를 하나 새로 만들고, 그 안에 우리가 방금 컴포넌트를 사용할 때 처럼 넣어 주면 된다. 아래 코드를 참고하자. 

 

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}

ReactDOM.render(<HomePage />, app);

 

이제, HomePage가 application의 최상위 컴포넌트가 되었기 때문에 우리는 HomePage 컴포넌트 하나만 ReactDOM.render 메소드에 전달 해주면 정상적으로 모든 컴포넌트가 렌더 된다. 

 

 

---

 

Props

 

Props이란?

Props는 간단히 말해 React Components에게 속성(property)으로 전달해주는 데이터라고 할 수 있다. 
아래 코드를 통해 예를 들어보자.

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

function HomePage() {
  return (
    <div>
      <Header />
      <Header />
    </div>
  );
}

 

위에서 만들었던 Header라는 컴포넌트를 HomePage안에서 여러개를 렌더 할 수 있다.(modularity)

하지만, 여기서 첫 번째 Header와 두 번째 Header에 다른 text가 렌더되게 하고 싶다면 어떻게 할 수 있을까?

혹은 어떤 text를 렌더 할 지 fetching data가 끝나기 전까지 모른다면?
이때 해당 데이터들을 Header 컴포넌트에 전달 할 수 있는 것이 props이다. 

 

---

FYI,

React에서, data 흐름은 컴포넌트 트리안에서 위에서 아래로 흐르게 된다. 즉, 최상위 컴포넌트에서 자식 컴포넌트들로 데이터가 흐르는 one-way data flow 라는 것이다. 조금 있다 다룰 state역시, props로 부모 컴포넌트에서 자식 컴포넌트로 전달 할 수 있다. 

components-tree

---

 

Props를 사용해보자

props를 이용해 Header컴포넌트에 다른 텍스트를 전달하여 렌더 해보자.

function Header({ title }) {
  return <h1>{ title ? title : "Default Title" }</h1>;
}

function HomePage() {
  return (
    <div>
      <Header title="React 💙"/>
      <Header title="2nd title React 💙"/>
    </div>
  );
}

[ 전달 ]

Header component에 HTML attribute를 전달 하는 것처럼, 우리가 원하는 속성인 title이라는 키와 그에 해당하는 값을 전달 해주면 간단하게 props를 전달 해줄 수 있다. 

 

[ 받기 ]

자식 컴포넌트에서 함수의 첫번째 parameter로 props를 내려 받을 수 있다. 

위의 코드에서는 destructure를 하여 바로 title을 받고 있지만, 아래 처럼 props로 받아서 하나씩 풀어서 사용 할 수도 있다.

function Header( props ) {
  return <h1>{ props.title ? props.title : "Default Title" }</h1>;
}

 

[ 주의 사항 ]

위 코드를 보면 Header 컴포넌트에서  curly braces({})를 사용한 JSX문법을 사용하는 것을 볼 수 있다. 

이렇게 {}를 이용하면 JSX 마크업 안에 바로 JavaScript 문법을 사용할 수 있다. (즉, {}안에서는 JSX 문법 -> JavaScript 문법)

 

위와 같은 {} 문법을 사용하였기 때문에, JSX 마크업 안에서 삼항 연산자와 같은 JS 문법을 사용할 수 있는 것이다. 

 

 

 

---

여기까지 리액트의 주요 구성요소인 Components 와 props에 대해 간단히 정리해보았다. 
다음 포스트에서는 3요소중 마지막인 State가 무엇인지, State와 event-handler를 이용하여 어떻게 React가 Interactivity를 높이고 있는지 알아보자.