-
React+ 003 PropsReact/React + 2023. 1. 3. 08:45728x90
내가 만든 컴포넌트도 속성값을 가질 수 있을까?
리액트는 속성을 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