4강. props

props란?

• properties의 줄임말로 우리가 어떠한 값을 컴포넌트에게 전달할 때 사용한다.
• (상위 컴포넌트가 하위 컴포넌트에게 값을 전달할 때 사용한다. - 단방향 데이터 흐름)
• props 는 자식 입장에서 수정할 수 없고 읽기 전용이다.

 

1. 기본구조

//app.js

... 생략 ...

function Header(props){
  return <header>
    <h1><a href="/">{props.title}</a></h1>
  </header>
}

... 생략 ...

function App() {
  return (
    <div className="App">
      <Header title = "WEB"></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

... 생략 ...

3강에서 컴포넌트를 이용하여 작성하는 방법을 배웠다.

컴포넌트를 쓰기 위해 함수를 정의하는데 함수의 매개변수 란에 props를 명시해줌으로써, props 사용이 가능해 진다.

 

하위 컴포넌트에서 title은 WEB이라는 값을 주었다.

그 값을 상위 컴포넌트에서 읽어 props라는 객체에 저장한다.

props는 다음과 같은 형태를 지닐 것이다.

이 props 값을 {}에 넣어 사용하면 된다.

- {}을 사용하지 않으면 문자열로 인식한다 => "props.title"로 인식

 

이렇게 사용하면,

다음과 같이 전에 작성한 결과와 똑같이 화면이 출력됨을 알 수 있다.

 

2. 배열로 넘길 때는 고유한 값이 필요

위에서는 하나의 값만을 전달했다.

만약 중간에 html, css, javascript 를 전달하고 싶을때는 어떻게 할까?

코드를 먼저 살펴보자

 

// app.js

... 생략 ...

function Nav(props){
  const lis = []
  
  const tmp = props.topics;
  const lis = tmp.map((tmp) => <li key={tmp.id}>{tmp.title}</li>);
  
  
  /* for(let i=0; i< props.topics.length; i++){
      let t = props.topics[i];
      lis.push(<li key={t.id}><a href={'/read/ + t.id'}>{t.title}</a></li>)
    }
  */

  return <nav>
  <ol>
    {lis}
  </ol>
</nav>
}

... 생략 ...

function App() {

  const topics =  [
    {id:1 , title:'html', body:'html is ...'},
    {id:2 , title:'css', body:'css is ...'},
    {id:3 , title:'javascript', body:'javascript is ...'}
  ]
  
  return (
    <div className="App">
      <Header title = "WEB"></Header>
      <Nav topics={topics}></Nav>
      <Article></Article>
    </div>
  );
}

... 생략 ...

간단히 App함수에 topics 배열을 추가한다.

그리고 하위 태그에서 topics배열을 넘겨준다.

 

Nav함수에서 topics를 props에 저장한다.

props는 다음과 같은 형태일 것이다.

배열이 전달된 것이다.

 

배열로 전달 된 것을 두가지 방법(반복문 , map)으로 나누어 출력이 가능하다.

 

반복문

function Nav(props){

   const lis = [];
  
   for(let i=0; i< props.topics.length; i++){
       let t = props.topics[i];
       lis.push(<li key={t.id}><a href={'/read/' + t.id}>{t.title}</a></li>)
     }
  

  return <nav>
  <ol>
    {lis}
  </ol>
</nav>
}

반복문을 사용해서 lis에 저장하고 출력이 가능하다.

key는 유니크 (고유특성) 를 지녀야 하며, key를 이용해 배열의 해당 값을 알아낸다.

 

map

function Nav(props){

  const tmp = props.topics;
  const lis = tmp.map((tmp) => <li key={tmp.id}>{tmp.title}</li>);
 
  return <nav>
  <ol>
    {lis}
  </ol>
</nav>
}

배열보다 간결하고 빠른 map을 사용하였다.

 

위 두가지 방법 모두 사용가능하며 map을 많이 사용한다.

 

article은 한번 따로 작성해보자.

 

https://github.com/denist2322/youtube_react/commit/e7b67e7d6eab9262341364889784b72664aa1e5d

4강props · denist2322/youtube_react@e7b67e7