컴포넌트

Study Date

Dec 6, 2023 07:30 AM

Status

Done

Tags

리액트의 컴포넌트는 함수이다

props를 전달받아 JSX를 반환하는 함수


function 컴포넌트이름(props) {
	return (
		<img src={props.src}></img>...
	)
}

컴포넌트의 기본 props를 줄 수 있다


function Logo({size}) { //구조분해할당
	return (
		<img src={size}></div>
	)
}

Logo.defaultProps = {
	size: 200
}

Logo/index.js

prop-types를 지정할 수 있다

prop-type 에서 import해온다
타입에 맞지 않는 prop이 들어온다면 에러가 난다


import PropTypes from 'prop-types';

..
Logo.proptTypes = {
	size: PropTypes.number
}

Logo/index.js

필수 속성 이라는 것을 isRequired 로 표시할 수 있다


Logo.proptTypes = {
	size: PropTypes.number.isRequired
}

innerContent(?)는 childeren props로 자동으로 넘어온다

childeren은 PropTypes.node 타입이다

useState로 지역 상태 관리

컴포넌트에 이벤트 바인딩


<div onClick={메서드}></div>

부모 컴포넌트에게 메시지 전달하기

여러가지 방법이 있음(리덕스, props로 내려주는 방법 등)

ex) 부모가 props로 메서드를 내려주고, 자식은 적재적소에 해당 메서드를 실행하는 방법


//App.js
function App() {
	const [ count, setCount ] = useState(0)
	return (
		<Logo onDecrease={setCount(count-1)} />
	)
}


//Logo.js
function Logo({onDecrease}) {
	return (
		<button onClick={onDecrease}>-</button>
	)
}