props에 대해 정리해보자.
JSX문법에서 컴포넌트 작성 시 컴포넌트에 지정한 속성들을 props라 부른다. properties의 약자이며, 컴포넌트에 속성을 지정해주면 얘네들이 하나의 객체로 모여서 컴포넌트를 지정한 함수의 첫 번째 파라미터로 전달된다! 이 때 파라미터 이름은 통상 props로 해주는 게 깔끔. 이 때 props로 전달하는 것은 함수도 가능하다.
ex)
import React from 'react';
import Jofe from './jofe';
function App(){
const func = function(){
alert("Hi!");
}
return (
<>
<Jofe name="lje" age={23} func={func}/>
</>
);
}
export default App;
이렇게 App.js에서 Jofe라는 컴포넌트를 사용하는데 이런 식으로 props들을 Jofe컴포넌트로 전달가능하며, 이 녀석들은 다음과 같은 형태 즉 객체의 형태로 묶여서 전달됨.
{
name : "lge",
age : 23,
func : func
}
그럼 여기서 children이란 걸 알아본다. props에서 특별취급하는 prop으로, JSX 문법에서 컴포넌트 작성 시 컴포넌트를 단일 태그가 아닌 여는태그 + 닫는태그의 형태로 작성하면, 이 태그 사이에 작성된 코드가 자동으로 아무것도 해주지 않아도 children이란 값에 담겨 컴포넌트로 전달된다.
import React from 'react';
import Jofe from './jofe';
function App(){
return (
<>
<Jofe name="lje" age={23}>안녕안녕children</Jofe>
</>
);
}
export default App;즉 여기선 안녕안녕children이란 문자열이 chidren에 담겨 Jofe컴포넌트에 전달된다. children이란 값에 담겨 전달되니 Jofe컴포넌트를 지정한 함수에선 children이란 이름으로 접근해 사용가능.
import React from 'react';
function Jofe({name, age, children}){
return (
<>
<p>my name is {name} and age = {age}, children = {children}</p>
</>
);
}
export default Jofe;
그럼 children을 쓰면 뭐가 좋은가?
1. 화면에 보여질 모습을 좀 더 직관적인 코드로 쓰고자 할 때 활용 가능
2. 컴포넌트 안에 컴포넌트 작성 또는 컴포넌트 안에 복잡한 태그들 작성 가능. children을 쓸려면 단일 태그로 컴포넌트를 작성하는 게 아니라 여는 태그 + 닫는 태그로 컴포넌트를 작성하게 되므로!
'WEB > REACT & NEXT' 카테고리의 다른 글
| [React.js] 리액트가 렌더링하는 방식(feat. Virtual DOM) (0) | 2022.01.25 |
|---|---|
| [React.js] state에 대한 개념 (1) | 2021.11.07 |
| [React.js] props에 대한 개념 (0) | 2021.10.31 |
| [React.js] React Element 그리고 컴포넌트에 대한 개념 (0) | 2021.10.30 |
| [React.js] JSX에서 javascript 사용법 (0) | 2021.09.28 |
