[기본 개념] #1. props

들어가기 앞서 리액트는 어쩌다 만들어졌을까?

흥미로운 주제, 못 참죠?

 

DOM?

문서 객체모델, 웹페이지의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다.

기존의 HTML로 구성한 UI를 제어하면, DOM을 변형시키기 위해서 속성을 바꾸어 주어야 한다.

즉 관리가 힘들어진다.

 

-> 리액트는 어떤 상태가 바뀌었을 때 상태에 따라 DOM을 어떻게 업데이트할지 규칙을 정하는 것이 아니라, 다 날려버리고 처음부터 모든 걸 새로 만들어서 보여준다면 어떨까?라는 아이디어에서 개발이 시작되었다.

   -> 리액트에서는 Virtual DOM이라는 것을 사용해서 이것을 가능하게 했다.

Virtual Dom?
실제로 보이는 것이 아니라, 메모리에 가상으로 존재하는 DOM으로서 js 객체이기 때문에 훨씬 속도가 빠르다.

 

상태가 업데이트되면, 업데이트가 필요한 곳의 UI를 랜더링 하고, 실제 브라우저에 보이고 있는 DOM과 비교를 한 후, 차이를 감지해서 실제 DOM에 패치시켜 준다!

-> 이를 통해 업데이트를 어떻게 할지에 대한 고민을 하지 않으면서, 빠른 성능도 지켜낼 수 있다.

 

 

---

props

props는 properties의 줄임말로, 어떠한 값을 컴포넌트에게 전달해줘야 할 때, 사용한다.

 

 

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

이를 Hello 컴포넌트에서 name을 사용하려면 어떻게 해야 할까?

 

Hello.js

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

컴포넌트에게 전달되는 props는 파라미터를 통하여 조회 할 수 있다. props 는 객체 형태로 전달되며, 만약 name 값을 조회하고 싶다면 props.name을 조회하면 된다.

 

근데 사실 나는 개발할 때 props라는 값 자체로 전달해 준 적이 없다.

 

여러 개의 props, 비구조화 할당

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" color="red"/>
  );
}

export default App;

 

Hello.js

import React from 'react';

function Hello(props) {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}

export default Hello;

props 내부의 값을 조회할 때마다 props. 를 입력하고 았는데, 함수의 파라미터에서 비구조화 할당 (혹은 구조 분해라고도 불림) 문법을 사용하면 조금 더 코드를 간결하게 작성할 수 있다.

 

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;

 

와 나는 그동안 함수의 파라미터에서 비구조화 할당해서 사용을 했구나~~

 

 

 

defaultProps로 기본값 설정하기

띠용 그동안 아무 생각 없이 한 것 같은데 다 이런 이유가 있었구나...ㅎ

컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값을 설정하고 싶다면 컴포넌트에 defaultProps라는 값을 설정하면 된다.

 

Hello.js

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

 

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <>
      <Hello name="react" color="red"/>
      <Hello color="pink"/>
    </>
  );
}

export default App;

 

 

props.children

컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 조회하면 된다.

 

Wrapper.js

import React from 'react';

function Wrapper() {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>

    </div>
  )
}

export default Wrapper;

 

App.js

import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red"/>
      <Hello color="pink"/>
    </Wrapper>
  );
}

export default App;

 

브라우저를 확인하면 Hello 컴포넌트들은 보이지 않을 것이다.

 

내부의 내용이 보이게 하기 위해서는 Wrapper에서props.children을 렌더링해주어야 한다.

 

Wrapper.js

import React from 'react';

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
      {children}
    </div>
  )
}

export default Wrapper;

 

 

 

출처 :

https://react.vlpt.us/basic/05-props.html

5. props 를 통해 컴포넌트에게 값 전달하기 · GitBook