<img src="image.jpg" width="100" height="100">
위 html 태그는 src가 무엇이냐에 따라 이미지가 달라지고, width가 무엇이냐에 따라 이미지의 크기가 달라진다.
즉 src, width와 같은 속성들 덕분에 이미지 태그는 입력값을 가질 수 있다.
이번에는 컴포넌트에 속성을 적용해보는 방법에 대해 알아볼 것이다.
우선 코드를 아래와 같이 수정한다.
import logo from './logo.svg';
import './App.css';
function Header(props){
return <header>
<h1><a href="/">{props.title}</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(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>
</div>
);
}
export default App;
코드 살펴보기
Header와 Article에 prop을 이용하여 값을 바꾸기 위해 title과 body에 값을 준다.
<Header title="REACT"></Header>
<Article title="Welcome" body="Hello, WEB"></Article>
그리고 속성을 이용할 때는 자신이 만든 컴포넌트 괄호에 props를 추가한다.
function Nav(props){
function Article(props){
그리고 속성을 사용할 내용을 중괄호를 이용하여 넣어준다.
<h1><a href="/">{props.title}</a></h1>
<h2>{props.title}</h2>
{props.body}
결과
이제 title, body와 같은 속성을 이용하여 내용을 수정하고 변경할 수 있게 되었다.
이번에는 1. html 2.css 3. js 목록을 속성을 이용하여 바꿔볼 것이다.
우선 아래와 같이 코드를 수정한다.
import logo from './logo.svg';
import './App.css';
function Header(props){
return <header>
<h1><a href="/">{props.title}</a></h1>
</header>
}
function 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 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>
<Header title="WEB"></Header>
<Nav topics={topics}></Nav>
<Article title="Welcome" body="Hello, WEB"></Article>
</div>
);
}
export default App;
코드 살펴보기
const topics라는 변수를 만들어 정보가 여러 개이므로 배열로 값을 만든다.
그리고 각자의 id값, title, body의 내용을 적어준다.
const topics = [
{id:1, title:'html', body:'html is...'},
{id:2, title:'css', body:'css is...'},
{id:3, title:'javascript', body:'javascript is...'}
]
그리고 위의 내용을 <Nav>에 prop으로 전달한다.
이때 데이터를 문자열이 아닌 있는 그대로 전달하기 위해 중괄호를 사용한다.
<Nav topics={topics}></Nav>
그리고 내용을 넣을 const lis라를 배열 변수를 만들었고, props.topics의 길이만큼 lis에 동적으로 값을 전달해준다.
key 값은 태그들을 추적할 때 정확하게 동작하게 하고, 성능을 높히는데 협조를 한다.
function 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>
이제 컴포넌트도 언제나 똑같이 동작하는 것이 아닌 우리가 주는 값에 따라 다르게 동작할 수 있게 되었다.
'🌐 Web > React' 카테고리의 다른 글
06. STATE (0) | 2022.08.16 |
---|---|
05. 이벤트 (0) | 2022.08.16 |
03. 컴포넌트(사용자 정의 태그) 만들기 (0) | 2022.08.15 |
02. 소스코드 수정방법 (0) | 2022.08.15 |
01. 실습환경 구축 (0) | 2022.08.15 |