React - 입문 기록 4

HTML 태그의 속성, 예를 들어 아래와 같은 속성 내용을

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

컴포넌트에서 사용하는 방법

 

React에서는 저러한 속성을 Prop, 프롭이라고 부른다.

 

 

적용 방법

컴포넌트에 속성을 넣는다.
이 속성의 내용이 컴포넌트가 사용하는 함수의 전달인자로 인식된다.

- src/App.js

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

// ..

이것만으로는 속성이 적용되지 않는다.

 

함수의 매개변수에 내용을 넣는다.

- src/App.js

// ..

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

// ..

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

// ..

함수 Header의 파라미터에 props를 넣었다.

내용은 반드시 props가 되지 않아도 무방하다.

 

그리고 컴포넌트로 받아온 인자를 웹에 적용하기위해

매개변수 props의 title이라는 의미로 {props.title}이라고 입력한다.

 

속성이 적용되었다.

 

 

다른 곳에도 적용해본다.

- before

// ..

const Article = () => {
  return (
    <article>
      <h2>Welcome</h2>
      Hello, Web
    </article>
  );
};

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

// ..

 

- after

// ..

const 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>
      <Article title="Hi" body="Hello, React"></Article>
    </div>
  );
}

// ..

 

<ol> <li> 태그를 사용하는 컴포넌트 <Nav>에도 적용한다.

- before

// ..
const 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 App() {
  return (
    <div>
      <Header title="WEB"></Header>
      <Nav></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}
// ..

 

- after

// ..
const 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 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>
  );
}
// ..

HTML 하드 코딩을 자바스크립트 문법을 사용하여 간단하게 불러와 나열할 수 있게 되었다.