React
컴포넌트 줄이기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function App(){
return (
<div>
<header>
<h1><a href="/">WEB</a></h1>
<header>
<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>
<article>
<h2>WELCOME</h2>
Hello,WEB
</article>
</div>
)
}
- Header 컴포넌트
1
2
3
4
5
6
7
8
9
10
11
import React from "react"
function Header(){
return (
<header>
<h1>header 컴포넌트입니다.</h1>
</header>
)
}
export default Header
- Nav 컴포넌트
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from "react"
function Nav(){
return(
<nav>
<ol>
<li>
<a hre="#">예시 링크1</a>
</li>
<li>
<a hre="#">예시 링크2</a>
</li>
<li>
<a hre="#">예시 링크3</a>
</li>
</ol>
</nav>
)
}
export default Nav
- Article 컴포넌트
1
2
3
4
5
6
7
8
9
10
11
12
import React from "react"
function Article (){
return (
<article>
<h2>Hi</h2>
example Hi
</article>
)
}
export default Article
- 완성 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from "react"
import Header from "./Header.js"
import Nav from "./Nav.js"
import Article from "./Article.js"
function App (){
return (
<div>
<Header></Header>
<Nav /> {/*한 줄로 축약 가능*/}
<Article />
</div>
)
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
prop
- 컴포넌트에 어떠한 함수나 값을 전달할 때 사용하는 속성이다.
- 리액트는 단방향 데이터 흐름을 갖고 있으며, 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다.
- 자식 컴포넌트에서
prop을 수정할 수 없는 읽기 전용 데이터이다. - 한 개의
prop은 그대로 전달할 수 있고, 여러 개의prop은 비구조화 할당 문법을 사용하여 전달한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from "react"
function App(){
const list = [
id: "Sara",
gender: "female"
]
return (
<div>
<Header transmit={list}/>
<Nav transmit={list}/>
<Article />
</div>
)
}
- Header 컴포넌트
transmit이라는prop으로 하위 컴포넌트에게list를 넘겨준다.- 전달받은
transmit을 통해 상위 컴포넌트의list배열에 접근할 수 있다.. App컴포넌트의list를 임의의prop명인props로 전달받는다.list배열에id를 출력한다.
1
2
3
4
5
6
7
8
9
10
11
import React from "react"
function Header (props){
return(
<header>
<h1>{props.id}</h1>
</header>
)
}
export default Header
map()활용하기Header컴포넌트에map()을 활용하여 데이터를 펼칠 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from "react"
function App(){
const list = [
{id: "Sara",
gender: "female"},
{id: "Mike",
gender: "male"},
{id: "John",
gender: "male"},
]
return (
<div>
<Header transmit={list}/>
<Nav transmit={list}/>
<Article />
</div>
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from "react"
function Header ({props}){
return(
<header>
{props.map(el => (
<div key={el.id}>
<h1>{el.id}</h1>
<p>{el.gender}</p>
</div>
))}
</header>
)
}
export default Header