TIL | React (Props & Event)
📲 Props
props
: properties(속성), 단어 뜻 그대로 컴포넌트의 속성값
props
는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체를 의미한다.
props
를 이용해 어떤 자바스크립트 값이든 모두 자식 컴포넌트에 전달할 수 있다.(변수, state
값, event handler
등)
⚡️ Props 객체
-> props, 즉 컴포넌트의 속성을 어떻게 정의하는지 코드 예시를 통해 알아보겠습니다.
// Parent.js
import React, { useState } from 'react';
import Child from '../pages/Child/Child';
function Parent() {
const [color, setColor] = useState('red');
return (
<div>
<h1>Parent Component</h1>
<Child />
</div>
);
}
export default Parent;
Parent.js
부모 컴포넌트.
- 부모 컴포넌트 안에서
<Child/>
컴포넌트를 import 후 <h1>
태그 아래에 위치해줌.
-> 부모의 state에 있는 데이터를 <Child />
컴포넌트에게 props를 통해 넘기는 과정을 아래의 코드 예시를 통해 보여드리겠습니다.
// Parent.js
import React, { useState } from 'react';
import Child from '../pages/Child/Child';
function Parent() {
const [color, setColor] = useState('red');
return (
<div>
<h1>Parent Component</h1>
<Child titleColor={color} />
</div>
);
export default Parent;
- 자식 컴포넌트의
props
로 titleColor
속성을 생성함.
titleColor
의 값으로 color
, 즉 부모 컴포넌트의 state인 color
값을 전달해주었음.
-> 이러한 방식으로 props
를 통해 부모 컴포넌트 내부의 state 값을 자식 컴포넌트에게 전달할 수 있다.
-> Child.js
내부에서 props 객체가 어떻게 생겼는지 아래의 코드로 확인해보겠습니다.
// Child.js
import React from 'react';
function Child(props) {
// console.log(props);
return (
<div>
<h1 style={{color : props.titleColor}}>Child Component</h1>
</div>
);
}
export default Child;
-> <h1>
태그의 글자 색상을 부모 컴포넌트의 state
로 부터 전달 받은 데이터를 지정하는 과정
- 함수 컴포넌트는 부모가 전달한
props
를 인자로 받은 후,
return
문 위에서 props
값을 console.log
로 확인해줌.
- 결과 확인 시
props
객체 안에 부모로 부터 전달받은 데이터가 key-value
형태로 담겨 있는 것을 확인할 수 있음.
- 컴포넌트 내부에서 부모 컴포넌트로부터 전달받은
props
데이터를 사용하기 위해서는 props
객체의 특정 키값, 즉 props.titleColor
이런 식으로 작성해주면 된다.
<h1 style={{color : props.titleColor}}>Child Component</h1>
// props : 해당 컴포넌트의 props 객체
// props.titleColor : props 객체의 특정 key(titleColor)값. 즉 "red"
⭐️ Props & event
-> props를 통한 event handler 전달
// Parent.js
import React, { useState } from 'react';
import Child from '../pages/Child/Child';
function Parent() {
const [color, setColor] = useState('red');
return (
<div>
<h1>Parent Component</h1>
<Child titleColor={color} changeColor={() => setColor('blue')} />
</div>
);
export default Parent;
-> props
의 changeColor
값으로 Parent 함수에서 정의한 setColor
함수 자체를 넘겨주고 있다.
<Child />
컴포넌트에서 어떻게 props
로 전달받은 handleColor
함수를 활용하는지 알아보자.
// Child.js
import React from 'react';
function Child(props) {
return (
<div>
<h1 style={{color : props.titleColor}}>Child Component</h1>
**<button onClick={props.changeColor}>Click</button>**
</div>
);
}
export default Child;
<Child />
컴포넌트 내부에 <button>
태그가 존재.
- 다음의 순서에 따라서 코드가 실행된다.
<button>
요소에서 onClick
이벤트 발생
- 이벤트 발생 시
props.changeColor
실행
- props 객체의
changeColor
, 즉 부모 컴포넌트로부터 전달받은 setColor
함수 실행
setColor
함수 실행 시 state의 color
값이 'blue'
로 변경
<Child />
컴포넌트에 변경된 state 데이터(color
) 전달
props.titleColor
를 글자 색상으로 지정하는 <h1>
타이틀 색상 변경
Author And Source
이 문제에 관하여(TIL | React (Props & Event)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@peaceminusone/TIL-React-Props-Event
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
props
: properties(속성), 단어 뜻 그대로 컴포넌트의 속성값props
는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체를 의미한다.props
를 이용해 어떤 자바스크립트 값이든 모두 자식 컴포넌트에 전달할 수 있다.(변수,state
값,event handler
등)
// Parent.js
import React, { useState } from 'react';
import Child from '../pages/Child/Child';
function Parent() {
const [color, setColor] = useState('red');
return (
<div>
<h1>Parent Component</h1>
<Child />
</div>
);
}
export default Parent;
Parent.js
부모 컴포넌트.- 부모 컴포넌트 안에서
<Child/>
컴포넌트를 import 후<h1>
태그 아래에 위치해줌.
<Child />
컴포넌트에게 props를 통해 넘기는 과정을 아래의 코드 예시를 통해 보여드리겠습니다.// Parent.js
import React, { useState } from 'react';
import Child from '../pages/Child/Child';
function Parent() {
const [color, setColor] = useState('red');
return (
<div>
<h1>Parent Component</h1>
<Child titleColor={color} />
</div>
);
export default Parent;
- 자식 컴포넌트의
props
로titleColor
속성을 생성함. titleColor
의 값으로color
, 즉 부모 컴포넌트의 state인color
값을 전달해주었음.
props
를 통해 부모 컴포넌트 내부의 state 값을 자식 컴포넌트에게 전달할 수 있다.Child.js
내부에서 props 객체가 어떻게 생겼는지 아래의 코드로 확인해보겠습니다.// Child.js
import React from 'react';
function Child(props) {
// console.log(props);
return (
<div>
<h1 style={{color : props.titleColor}}>Child Component</h1>
</div>
);
}
export default Child;
<h1>
태그의 글자 색상을 부모 컴포넌트의 state
로 부터 전달 받은 데이터를 지정하는 과정- 함수 컴포넌트는 부모가 전달한
props
를 인자로 받은 후, return
문 위에서props
값을console.log
로 확인해줌.- 결과 확인 시
props
객체 안에 부모로 부터 전달받은 데이터가key-value
형태로 담겨 있는 것을 확인할 수 있음. - 컴포넌트 내부에서 부모 컴포넌트로부터 전달받은
props
데이터를 사용하기 위해서는props
객체의 특정 키값, 즉props.titleColor
이런 식으로 작성해주면 된다.
<h1 style={{color : props.titleColor}}>Child Component</h1>
// props : 해당 컴포넌트의 props 객체
// props.titleColor : props 객체의 특정 key(titleColor)값. 즉 "red"
-> props를 통한 event handler 전달
// Parent.js
import React, { useState } from 'react';
import Child from '../pages/Child/Child';
function Parent() {
const [color, setColor] = useState('red');
return (
<div>
<h1>Parent Component</h1>
<Child titleColor={color} changeColor={() => setColor('blue')} />
</div>
);
export default Parent;
->
props
의changeColor
값으로 Parent 함수에서 정의한setColor
함수 자체를 넘겨주고 있다.
<Child />
컴포넌트에서 어떻게props
로 전달받은handleColor
함수를 활용하는지 알아보자.
// Child.js
import React from 'react';
function Child(props) {
return (
<div>
<h1 style={{color : props.titleColor}}>Child Component</h1>
**<button onClick={props.changeColor}>Click</button>**
</div>
);
}
export default Child;
<Child />
컴포넌트 내부에<button>
태그가 존재.- 다음의 순서에 따라서 코드가 실행된다.
<button>
요소에서onClick
이벤트 발생- 이벤트 발생 시
props.changeColor
실행 - props 객체의
changeColor
, 즉 부모 컴포넌트로부터 전달받은setColor
함수 실행 setColor
함수 실행 시 state의color
값이'blue'
로 변경<Child />
컴포넌트에 변경된 state 데이터(color
) 전달props.titleColor
를 글자 색상으로 지정하는<h1>
타이틀 색상 변경
Author And Source
이 문제에 관하여(TIL | React (Props & Event)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@peaceminusone/TIL-React-Props-Event저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)