728x90
반응형
✅component
react는 사용자 정의 태그를 만드는 기술이다. 이것이 react의 본질이다.
react에서 사용자 정의 태그를 만들 때는 무조건 대문자로! , 소문자 태그는 html태그이다.
react는 이 사용자 정의 태그를 component라고 하는 것이다.
function Header(props){
return (
<header>
<h1><a href='/read/1'>{props.title}</a></h1>
</header>
)
}
function App() {
return (
<div className="App">
<Header title="react"></Header>
</div>
);
}
export default App;
function Header(props){}와 <Header title="react"></Header>처럼 함수명과 component 태크명 일치시키기!
※ 함수는 x라는 입력값에 따라 y라는 결과가 나온다.
함수의 x -> 변수 , 파라미터
✅props
props - 속성
props 는 properties 의 줄임말이다. 컴포넌트에 어떤 값을 주냐에 따라 다른 값을 가질 수 있게 해준다. 즉 유사 태그를 가질 수 있게 해준다. (태그 안에 넣는 값들!! )
import logo from './logo.svg';
import './App.css';
function Header(props){
console.log('props',props.title);
return (
<header>
<h1><a href='/read/1'>{props.title}</a></h1>
{}-> 중괄호는 일반적인 문자열이 아니라 표현식으로 나타내기 때문에 해석이 되는 것
</header>
)
}
function App() {
return (
<div className="App">
<Header title="react"></Header>
<Nav title='topics'></Nav>
<Article title="welcome" body="hello, web"></Article>
</div>
);
}
export default App;
✅{} 의 역할
function Nav(){
const lis = [
<li>전공</li>,
<li>나이</li>,
<li>취미</li>
]
return (
<nav>
<ol>
{lis}
</ol>
</nav>
)
}
이때 react에 의해 lis배열의 원소들을 하나씩 꺼내서 <ol> 태크 안으로 배치 시켜준다.
하지만 우리가 해야할 것은 props에 topics로 전달 된 값을 받아서 동적으로 태그를 담아서 배열에 담기
import logo from './logo.svg';
import './App.css';
function Header(props){
console.log('props',props.title);
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>)
}
/*react는 자동으로 생성한 태그들의 경우에는 react가 태그들을 추적해야 하는데 추적할 때 근거가 필요하다.*/
/*그 근거로써 key라고 하는 약속된 props을 부여함으로써 react가 성능을 높이고 정확한 동작을 하게 한다.*/
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:'html is ....'},
{id:3 , title:'javascript', body:'javascript is ....'},
]
return (
<div className="App">
<Header title="react"></Header>
<Nav topics={topics}></Nav>
<Article title="welcome" body="hello, web"></Article>
</div>
);
}
export default App;
Nav컴포넌트에서 빈 배열을 만들어서 반복문을 통해 props로 전달받은 변수로 리스트를 만들 수 있다는 것이 포인트이다!
그리고 href 안에서도 {}중괄호를 활용이 가능하다.
react는 어디서든 중괄호만 있으면 코드가 완성된다는 것이 참 신기하다
728x90
반응형
'Frontend > React' 카테고리의 다른 글
6일차 - react create (0) | 2023.02.12 |
---|---|
5일차 - react state (0) | 2023.02.08 |
4일차 - react 이벤트 기능 (0) | 2023.02.02 |
2일차 - react 수정과 배포 (0) | 2023.01.29 |
react 설치하기 (0) | 2023.01.29 |