React+ 003 Props

내가 만든 컴포넌트도 속성값을 가질 수 있을까?

 

리액트는 속성을 PROP이라고 부른다. 

 

그럼 오른쪽 사진에서 React라고 써져있는 부분을 하드코딩하지 않고 바꿀 수 있을까?

 

아래 코드에 Header 부분에 저렇게 title을 줘서 말이다

 

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

그럼 Header컴포넌트를 확인해줘야 한다.  파라미터로 props를 주고 어떤 내용이 있는지 콘솔창에 찍어보자

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

props에는 객체가 들어오는데

title이 DUBU로 나온다

Header태그에 달아준 것처럼 말이다!

 

그러면 이 DUBU라는 텍스트를 얻어내려면 props에 있는 title을 찍으면 되지 않을까?

왜 두번 나오는지는 모르겠는데 나온다!

그러면 props.title을 return 아래 붙여넣어주면 출력이 될까? 하드코딩하면 안된다 JSX형식에 맞춰서 중괄호를 더해주어야 한다!    Header와 Article을 바꿔주자

import "./App.css";
function Header(props) {
  return (
    <header>
      <h1><a href="/">{props.title}</a></h1>
    </header>
  );
}
...
const Article = (props) => {
  return (
    <article>
      <h2>{props.title}</h2>
      <p>{props.body}</p>
    </article>
  );
};
function App() {
  return (
    <div className="App">
      <Header title="DUBU" />
      <Nav />
      <Article title="반가워요!" body="안녕하세요~" />
      <Article title="으악새!" body="움직여요!" />
    </div>
  );
}
export default App;

목록에도 props로 줘서 li를 만들어지게 할 수는 없을까?

//Nav의 내부 안으로 들어와서 topic를 받아주기
const Nav = (props) => {//첫번째 파라미터는 props로
  const lis =[] //lis는 배열으로 선언
  for(let i=0; i<props.topics.length; i++){ //map을 주로 쓴다는데 쉽게 for로 먼저 시도해본다.
    let t = props.topics[i]; //t는 props.topics의 i번째 배열
    lis.push(<li key={t.id}><a href={'/read/'+t.id}>{t.title}</a></li>);
    //push는 배열의 끝에 값을 추가하는 함수
    //li각자가 고유한 키값을 가져야해서 key값은 t의 id값이라고 정해줌
  }
  return (
    <nav>
      <ol>
        {lis}
      </ol>
    </nav>
  );
};
...
function App() {
  //const에 담아두면 후에 바뀌지 않아서 단단한 코드가 된다.
  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="웹" />
      <Nav topics={topics} />{/** 위에서 만든 topic배열을 내부의 prop으로 전달한다. */}
      <Article title="반가워요!" body="안녕하세요~" />
    </div>
  );
}

key값을 주는거? 자동으로 생성한 태그는 추적할 수 있어야 한다나 뭐라나..