props : 컴포넌트가 어떤 값을 전달받아 사용해야 할 때 이용된다. 컴포넌트에 속성들을 지정하는 형태로 전달하며, 객체 형태로 전달된다! 무슨 말인지는 예시 코드를 보자.
import React from 'react';
import Jofe from './jofe';
function App(){
return (
<>
<Jofe />
</>
);
}
export default App;
이런 코드가 있다고 하자. App에서 Jofe라는 컴포넌트를 사용하는 모습이다. 이 때 Jofe컴포넌트에 "jsh"를 name이란 이름으로 전달하고 싶다면?
import React from 'react';
import Jofe from './jofe';
function App(){
return (
<>
<Jofe name="jsh"/>
</>
);
}
export default App;이렇게 태그의 속성을 지정하는 형태로 컴포넌트에 전달할 수 있다는 얘기다. 객체 형태로 전달된다는 것은, {name : "jsh"}이런 형태로 전달된다는 말이고.
Jofe 컴포넌트에선 이를 props라는 파라미터 이름으로 전달받아 사용가능하다. prrops말고 다른 이름도 쓸 수 있지만 다들 의미를 알기 쉽게 할려고 props라는 이름으로 쓴다고 한다.
import React from 'react';
function Jofe(props){
return (
<>
<p>my name is {props.name}</p>
</>
);
}
export default Jofe;
- Props를 여러 개 전달하기
다음과 같이 여러 개의 props를 전달하는 것도 물론 가능하다.
import React from 'react';
import Jofe from './jofe';
function App(){
return (
<>
<Jofe name="jsh" age={24}/>
</>
);
}
export default App;props를 전달할 때 자바스크립트 숫자를 전달하기 위해선 {}로 감싸서 해야 한다고 한다. 문자열같은 건 ""로 하면 되고. 또한 Jofe 컴포넌트에선 props라는 이름으로 파라미터를 받는 게 아니라 다음과 같은 형태로 받을 수도 있다.
import React from 'react';
function Jofe({name, age}){
return (
<>
<p>my name is {name} and age = {age}</p>
</>
);
}
export default Jofe;이렇게 하면 매번 props.name이나 props.age 등 번거롭게 props라는 이름을 달아줄 필요가 없다. 또한 props를 전달받지 않는 상황에 대비해 디폴트 props를 지정가능하다.
import React from 'react';
function Jofe({name = "jsh", age = 24}){
return (
<>
<p>my name is {name} and age = {age}</p>
</>
);
}
export default Jofe;다음과 같은 방법으로도 디폴트 props를 지정 가능.
import React from 'react';
function Jofe({name, age}){
return (
<>
<p>my name is {name} and age = {age}</p>
</>
);
}
Jofe.defaultProps = {
name: 'jsh',
age: 24
}
export default Jofe;
- 함수도 전달할 수 있다
함수도 props로 전달가능하다.
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;alert를 이용해 hi라는 알림창을 띄우는 함수 func를 Jofe컴포넌트에 전달하는 모습. Jofe컴포넌트에선 다음과 같이 활용가능하다.
import React from 'react';
function Jofe({name, age, func}){
return (
<>
<p onClick={func}>my name is {name} and age = {age}</p>
</>
);
}
export default Jofe;p태그의 onclick이벤트로 등록해줬다. 실제로 저 글을 클릭하면 다음과 같이 알림창이 뜬다.
'WEB > REACT & NEXT' 카테고리의 다른 글
| [React.js] state에 대한 개념 (0) | 2021.11.07 |
|---|---|
| [React.js] 조금 특별한 props, children (0) | 2021.11.01 |
| [React.js] React Element 그리고 컴포넌트에 대한 개념 (0) | 2021.10.30 |
| [React.js] JSX에서 javascript 사용법 (0) | 2021.09.28 |
| [React.js] JSX와 프래그먼트(Fragment) (0) | 2021.09.28 |
