React_Props

컴포넌트를 모아놓은 함수 App에서 각 컴포넌트에 작성되는 값들을 수정하고 싶다.

다시 말하면, 상위 컴포넌트 App에서 하위 컴포넌트들로 값을 상속시켜주는 방법에 대해 알아보자.

 

// import logo from './logo.svg';
import './App.css';

function Header() {
  return <header>
    <h1><a href="/">WEB</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() {
  return <article>
    <h2>Welcome</h2>
    Hello, WEB
  </article>
}
function App() {
  return (
    <div className="App">
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

export default App;

기본 컴포넌트로 나누는 방법에 대한 코드

 

이때, App안에서 태그에 변수를 주어서, 이를 각 함수(컴포넌트)로 출력하고 싶다.

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

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

Header 태그안에 값을 넣어주고, Header 함수에서 props로 정보를 받아서 출력하면, props는 object로 출력된다.

객체에서 필요한 정보 title을 뽑아주되, a태그안에 중괄호({})를 붙여서 넣어주면, 값이 알맞게 들어간다.

function Article(props) {
  return <article>
    <h2>{props.title}</h2>
    {props.body}
  </article>
}
function App() {
  return (
    <div className="App">
      <Header title="REACT"></Header>
      <Nav></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
      <Article title="Hi" body="Hello, REACT"></Article>
    </div>
  );

함수 재사용

위의 코드는 아래와 같은 출력을 보여준다.

같은 함수를 재사용하되, 태그에서 정보를 변경해서 출력할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

---

배열은 어떻게 조회하듯 출력할까?

 

function Nav(props) {
  const lst = [
    <li><a href="/read/1">html</a></li>,
    <li><a href="/read/2">css</a></li>,
    <li><a href="/read/3">js</a></li>
  ]
  return <nav>
    <ol>
      {lst}
    </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="REACT"></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

먼저, App()에 배열을 선언했다. 그리고 이 정보를 상속하기 위해 태그안에 작성하되 중괄호({})를 붙여서 넘겨주었다.

React는 태그안에 정보를 넣으면, 알맞게 출력해주는 기능이 있다.

Nav함수에 lst 배열을 ol태그로 감싸서 출력하는 것을 확인할 수 있다.

 

function Nav(props) {
  const lst = []
  for (let i=0; i<props.topics.length; i++) {
    let t = props.topics[i];
    lst.push(<li><a href={"/read/"+t.id}>{t.title}</a></li>)
  }
  return <nav>
    <ol>
      {lst}
    </ol>
  </nav>
}

빈 배열 lst를 만들고, for문으로 상속받은 topics의 원소들을 태그별로 push해주는 코드

이렇게 하면, 완성?

prop은 key값을 필요로 한다.

function Nav(props) {
  const lst = []
  for (let i=0; i<props.topics.length; i++) {
    let t = props.topics[i];
    lst.push(<li key={t.id}><a href={"/read/"+t.id}>{t.title}</a></li>)
  }
  return <nav>
    <ol>
      {lst}
    </ol>
  </nav>
}

react는 자동적으로 반복 생산하는 원소에는 찾아가는 근거가 필요하고, 이는 key를 필요로 한다.

---

- 전체 코드

// import logo from './logo.svg';
import './App.css';

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

function Nav(props) {
  const lst = []
  for (let i=0; i<props.topics.length; i++) {
    let t = props.topics[i];
    lst.push(<li key={t.id}><a href={"/read/"+t.id}>{t.title}</a></li>)
  }
  return <nav>
    <ol>
      {lst}
    </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 className="App">
      <Header title="REACT"></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

export default App;

 

- 내용 정리

 

- props

컴포넌트는 사용자가 만든 태그, 블럭같은 개념이다.

한번 만든 컴포넌트를 재사용하기 쉽게 하기 위해, 가장 큰 App 컴포넌트에 내용을 함수로 내려주는 실습을 했다.

기본적은 문자열은 변수 = "변수값" 으로 보내고, 배열은 변수={배열} 로 보내준다.

Vue에서는 template에서 js를 사용하기 위해 바인딩을 해줬지만, React는 아직까지 javascripts에서만 작성해서 중괄호면 충분하다.

 

- 후기

Javascript의 문법을 좀 더 익힐 필요가 있다. 알고리즘 문제를 풀듯 내 언어로 만들어야 겠다.

 

뭔가 탁! 끊어지는 하루였다.

아마 운동가는 길에 맛있는 냄새때문이라고 최면을 건다.