ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • React+ 003 Props
    React/React + 2023. 1. 3. 08:45
    728x90

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

     

    리액트는 속성을 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값을 주는거? 자동으로 생성한 태그는 추적할 수 있어야 한다나 뭐라나..

    728x90

    'React > React +' 카테고리의 다른 글

    React+ 005 State  (0) 2023.01.03
    React+004 Event  (0) 2023.01.03
    React+ 002 컴포넌트  (0) 2023.01.03
    React+ 001 설치, 수정, 배포  (1) 2023.01.03
    React + 000  (0) 2023.01.03
designitlikesloth