컴포넌트 구성 요소
- property(프로퍼티) : 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터이다.
상위 컴포넌트에서 하위 컴포넌트로 가 핵심 ( 부모 -> 자식 )
- state(스테이트) : 컴포넌트의 상태를 저장하고 변경할 수 있는 데이터
변경할 수 있는 이 핵심 ( props 는 읽기 전용으로 값 변경 불가 )
- 컨텍스트 : 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터
프로퍼티의 기초
// MyComponent.jsx
import React from 'react';
function MyComponent (props) {
const name = props.name;
return (
<div>
<h1>MyComponent</h1>
<span>{name}</span>
</div>
)
}
export default MyComponent;App.js 에서는 다음과 같은 코드로 MyComponent 컴포넌트를 import 해준다.
(그거 가지고 와! 이거 여기서 쓸거야 => 컴포넌트의 재사용성이라고 이해)
import MyComponent from './03/MyComponent';
App.js 에서 사용할 때는
다음과 같이 사용한다.
위와 같이 속성(attribute)형태로 전달되는 값을 프로퍼티라고 한다.
MyComponent 컴포넌트에서는 name 이라는 이름의 프로퍼티로 전달받은 "서지원 존잘" 문자열 값을 MyComponent 함수 안에서 props.name 형태로 참조할 수 있다. (JSX 폼)
앞으로의 예제에서는 prop-types 라이브러리를 이용한다.
prop-types
프로퍼티에서는 JS의 모든 자료형을 사용할 수 있다. 이 때 프로퍼티의 자료형은 미리 선언해주는 것이 좋다. 프로퍼티의 자료형을 미리 선언하면 리액트 엔진이 프로퍼티로 전달하는 값의 변화를 (실행 중 수정이 아님 -> 실행 중 수정 : 달리는 차에서 바퀴를 빼는 격..) 효율적으로 감지할 수 있고, 개발자가 실수로 지정되지 않은 자료형을 프로퍼티에 전달하려고 할 때 경고문으로 알려주기 때문이다.(뒤에 나오는 예제가 그러한 경우)
다양한 프로퍼티
function ChildComponent (props) {
const {
boolValue,
numValue,
arrayValue,
objValue,
nodeValue,
funcValue,
} = props;
// ES6 필수 문법에서 공부했던 구조 분해 할당!!!
return (
<div>
<span> 불리언값 : {boolValue} </span>
<span> 숫자값 : {numValue} </span>
<span> 배열값 : {arrayValue} </span>
<span> 객체값 : {objValue} </span>
<span> 노드값 : {nodeValue} </span>
<span> 함수값 : {funcValue} </span>
</div>
)
}
ChildComponent.propTypes = {
boolValue: PropTypes.bool,
numValue : PropTypes.number,
arrayValue : PropTypes.arrayOf(PropTypes.number),
objValue : PropTypes.object,
nodeValue : PropTypes.node,
funcValue : PropTypes.func,
}App.js 에서는 다음과 같이 써먹을 수 있다 ( 적용 가능하다 )
function App() {
return (
<div>
<ChildComponent
boolValue: {true},
numValue : {1},
arrayValue : {[1,2,3]},
objValue : {{ name : '제목', age : 30 }},
nodeValue : {<h1>노드</h1>},
funcValue : {() => { console.log('Okay !'}}
/>
</div>
)
}
export default App;특수한 형태의 프로퍼티 - Boolean
불리언은 true 또는 false만 정의할 수 있는 특수한 자료형이다. 앞에서 문자열 이외의 값은 중괄호로 묶어주어야 했고, 그렇게 했는데!!
불리언 값은 특별한 형태로 값을 전달할 수 있다. true의 경우 프로퍼티의 이름만 선언해도 전달할 수 있다.
// ColorComponent.jsx
import React from 'react';
function ColorComponent (props) {
const message = props.bored ? '놀러 가자' : '하던 일 열심히 마무리하기';
return (
<div>
<div style={{ color: props.color }}>
<p>안녕하세요 {props.name} 입니다. </p>
<p>{message}</p>
</div>
</div>
);
}
export default ColorComponent;// App.js
<h1>ColorComponent</h1>
<div><b>지루할 때 :</b>
<ColorComponent name="seojiwon" color="red" bored />
</div>
<div><b>즐거울 때 :</b>
<ColorComponent name="seowjion"/>
</div>실행 결과
props는 읽기 전용이다
함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다. React는 매우 유연하지만 한 가지 엄격한 규칙이 있는데,
모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다
다음 sum 함수를 보자.
function sum(a, b) {
return a + b;
}이런 함수들을 순수함수라고 한다. 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환한다. 반면에 다음 함수는 자신의 입력값을 변경하기 때문에 순수 함수가 아니다.
function withdraw(account, amount) {
account.total -= amount;
}물론 애플리케이션 UI는 동적이며 시간에 따라 변한다. 그렇기에 “state”라는 개념을 도입했다. React 컴포넌트는 state를 통해 위 규칙을 위반하지 않고 사용자 액션, 네트워크 응답 및 다른 요소에 대한 응답으로 시간에 따라 자신의 출력값을 변경할 수 있다.
