04. PROPS(속성)

<img src="image.jpg" width="100" height="100">

위 html 태그는 src가 무엇이냐에 따라 이미지가 달라지고, width가 무엇이냐에 따라 이미지의 크기가 달라진다.

즉 src, width와 같은 속성들 덕분에 이미지 태그는 입력값을 가질 수 있다.

이번에는 컴포넌트에 속성을 적용해보는 방법에 대해 알아볼 것이다.

---

우선 코드를 아래와 같이 수정한다.

import logo from './logo.svg';
import './App.css';
function Header(props){
  return <header>
  <h1><a href="/">{props.title}</a></h1>
</header>
}
function Nav(){
  return <nav>
    <ol>
      <li><a href="/read/1">html</a></li>
      <li><a href="/read/2">css</a></li>
      <li><a href="/read/3">js</a></li>
    </ol>
  </nav>
}
function Article(props){
  return <article>
    <h2>{props.title}</h2>
    {props.body}
  </article>
}
function App() {
  return (
    <div>
      <Header title="REACT"></Header>
      <Nav></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

export default App;

---

코드 살펴보기

Header와 Article에 prop을 이용하여 값을 바꾸기 위해 title과 body에 값을 준다.

<Header title="REACT"></Header>

 

<Article title="Welcome" body="Hello, WEB"></Article>

그리고 속성을 이용할 때는 자신이 만든 컴포넌트 괄호에 props를 추가한다.

function Nav(props){

function Article(props){

그리고 속성을 사용할 내용을 중괄호를 이용하여 넣어준다.

<h1><a href="/">{props.title}</a></h1>

    <h2>{props.title}</h2>
    {props.body}

---

결과

 

이제 title, body와 같은 속성을 이용하여 내용을 수정하고 변경할 수 있게 되었다.

---

이번에는 1. html 2.css 3. js 목록을 속성을 이용하여 바꿔볼 것이다.

우선 아래와 같이 코드를 수정한다.

import logo from './logo.svg';
import './App.css';
function Header(props){
  return <header>
  <h1><a href="/">{props.title}</a></h1>
</header>
}
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>
}
function Article(props){
  return <article>
    <h2>{props.title}</h2>
    {props.body}
  </article>
}
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>
      <Header title="WEB"></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

export default App;

---

코드 살펴보기

const topics라는 변수를 만들어 정보가 여러 개이므로 배열로 값을 만든다.

그리고 각자의 id값, title, body의 내용을 적어준다.

  const topics = [
    {id:1, title:'html', body:'html is...'},
    {id:2, title:'css', body:'css is...'},
    {id:3, title:'javascript', body:'javascript is...'}
  ]

그리고 위의 내용을  <Nav>에 prop으로 전달한다.

이때 데이터를 문자열이 아닌 있는 그대로 전달하기 위해 중괄호를 사용한다.

<Nav topics={topics}></Nav>

그리고 내용을 넣을 const lis라를 배열 변수를 만들었고, props.topics의 길이만큼 lis에 동적으로 값을 전달해준다.

key 값은 태그들을 추적할 때 정확하게 동작하게 하고, 성능을 높히는데 협조를 한다.

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>

이제 컴포넌트도 언제나 똑같이 동작하는 것이 아닌 우리가 주는 값에 따라 다르게 동작할 수 있게 되었다.

 

강의 영상 - https://opentutorials.org/course/4900/31266