[React] props 요약

프롭스란?

프롭스는 컴포넌트에 값을 넘겨줄때 사용한다. (부모 Element 에서 자식 Element 로 데이터를 전달)

넘겨줄수 있는 값은 변수, 함수, 객체, 배열, 자바스크립트 요소라면 제한이 없다. 주로 컴포넌트의 재사용을 위해서 사용한다.

 

예시1 - props를 활용한 컴포넌트

컴포넌트를 선언할 때, 구조분해 할당을 활용하여 더 간결하게 props를 받아 올수 있다.

const Welcom = (props) => {
	const {a, b, c} = props;
return <div>{a}</div>
}

예시2 - Object 로 전달받는 props

예시 1번을 더 간결하게 작성하려면 애초에 매개변수를 받는 시점에 props값을 받아 올수 있다.

const Welcom = ({a, b, c}) => {
return <div>...</div>
}

 

프롭스는 읽기 전용으로 프롭스의 값을 임의로 변경해서는 안된다. 리액트가 프롭스의 변경을 감지하고 재렌더링 하는데 있어서 문제를 야기할수 있다.

 

프롭스의 값을 변경하고 싶다면, 새로운 변수를 생성하고 프롭스의 값을 복제해서 사용할수 있다.

const Welcome = (props) => {
	const username = props.name + '님';
	retrun <h1>Hello! {username}</h1>;
}

 

• DOM Element(div, span)의 attribute는 카멜 케이스로 작성한다. 예) className, tableIndex
• 접근성 접두어인 "data-", "aria-" 로 시작하는 attribute는 예외! 예) data-type, aria-label
• HTML의 attribute 다른 이름을 가지는 JSX attribute 로는 class → className, for → htmlFor 등..
• HTML의 attribute 다른 동작 방식을 가지는 attribute가 있다. style은 string이 아니라 객체로 작성하고, 인풋의 attribute인 checked, value 값을 자유롭게 변경하려면 defaultChecked, defaultValue 값을 설정하면 된다.

 

위의 내용 정리

(<input type="checkbox" checked={false} />)

HTML에서 checked, value는 해당 값이 초기값으로 쓰이지만, 리액트에서는 현재값을 의미한다. 초기값으로 사용하려면, defaultChecked, defaultValue attribute를 설정하면 된다.

 

리액트에서만 쓰이는 attribute(Key)

key를 사용하면 리액트에서 어떤 value를 선택하는지 명확하게 알수 있고, 재렌더링을 더 효율적으로 수행할수 있다.

const Names = () => {

const name = [
    {key:'1', value:'효니'},
    {key:'2', value:'고래'},
    {key:'3', valye:'룽지'}
]
return (
	<div> 
	{name.map((item) => {<li key={item.key}> {item.value} </li>})}
</div>)
}