[React] props

 

 

1. Props의 개념

Property: 속성, 특성

- 리액트 컴포넌트의 속성(property)

- 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체

- 같은 컴포넌트이지만 색상, 배경, 글자 등의 세부 속성이 다른 것 => 컴포넌트의 모습과 속성을 결정하는 것

- 자식 컴포넌트가 부모 컴포넌트의 state를 가져다 쓸 때 사용(부모 컴포넌트 -> 자식 컴포넌트 state 전달)

cf) 자식 컴포넌트 -> 부모 컴포넌트로 props 전달 불가, 형제 컴포넌트로 전달 불가

- state를 사용하는 컴포넌트들 중 최상위 컴포넌트에 만들 것

 

 

2. Props의 특징

- 읽기 전용(Read-Only)

// pure함수: input(입력값)을 변경하지 않으며 같은 input에 대해서 항상 같은 output(출력값)을 리턴
function sum(a, b) {
	return a + b;
}

 

// impure함수: input(입력값)을 변경
function withdraw(account, amount) {
	account.total -= amount; // 입력받은 파라미터 account의 값을 변경
}

 

- 모든 리액트 컴포넌트는 그들의 props에 관해서는 Pure 함수 같은 역할을 해야 한다 => 모든 리액트 컴포넌트는 props를 직접 바꿀 수 없고 같은 props에 대해서는 항상 같은 결과를 보여 줄 것

=> 리액트 컴포넌트 관점에서 같은 props에 대해서 항상 같은 결과를 보여줘야 함

=> 리액트 컴포넌트의 props는 바꿀 수 없고, 같은 props가 들어오면 항상 같은 엘리먼트를 리턴함

 

 

3. Props 형태

- 키와 값으로 이루어진 키-값 쌍의 형태로 컴포넌트에 props를 넣음

// App 컴포넌트
function App(props) {
	return (
    	// Profile 컴포넌트
    	<Profile
            name="sky"
            introduction="안녕하세요."
            viewCount={1500}
        />
    );
}

cf. name, introduction 값에는 중괄호를 사용하지 않고 viewCount값에는 중괄호를 사용했는데 , 문자열을 중괄호로 감싸도 됨(JSX문법은 중괄호를 사용하면 무조건 자바스크립트 코드가 들어가고, props값을 넣을때 문자열, 정수, 변수, 컴포넌트 등이 들어 갈때 중괄호로 감싸줌)

 

4. props 사용

1) 부모 컴포넌트 App 내부에 자식 컴포넌트인 Profile에 속성을 정의

<자식컴포넌트 속성명={state명}>

 

function App() {
	let [name, setName] = useState("")

	return (
    	<Profile name="sky"/>
    );
}

 

2) 자식 컴포넌트에 props파라미터 등록 후 props.속성명 사용

function Profile(props) {
	return(
    	<h1>props.name</h1>
    );
}