1. props
props(property)?
- 성별이나 이름처럼 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.
- 부모 컴포넌트로부터 전달받은 값이며 객체 형태이다. (어떤 타입의 값을 넣어도 전달할 수 있다!)
- 외부로 부터 전달받은 변하지 않는 값, 그래서 함부로 변경될 수 없는 읽기 전용 객체이다
How to use props?
- 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다
function Parent() {
return (
<div className="parent">
<h1>I'm the parent</h1>
<Child /> // Child 컴포넌트
</div>
);
};
function Child() {
return (
<div className="child"></div>
);
};- props 이용해 정의된 값과 속성을 전달한다(text 속성 정의해 속성에 문자열 값 할당)
이 때, 전달하고자 하는 값을 {}를 이용해 감싸준다
function Parent() {
return (
<div className="parent">
<h1>I'm the parent</h1>
<Child text={"I'm the child"} // 전달하고자 하는 값을 {} 이용해 감싸준다
</div>
);
};- 전달받은 props를 렌더링한다. props는 객체이기 때문에 {attribute : value}의 형태를 가지게 된다.
function Child(props) {
return ( // props를 렌더링하려면 JSX 안에 직접 불러서 사용한다
<div className="child">
<p>{props.text}</p> //props는 객체이기 때문에 {attribute : value}의 형태
</div>
);
};// props를 전달하는 또 다른 방법
// props.children을 이용하면 해당 value에 접근하여 사용할 수 있디
<p>{props.children}</p> 2. state
state?
- state는 props와 달리 나이나 주소처럼 컴포넌트 내부에서 변할 수 있는 값이다.
- 컴포넌트 내부에서 변할 수 있는 값, 쉽게 말해 '상태'는 React state로 다루어야 한다
How to use useState?
- React에서는 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공한다.
이를 사용하기 위해서 import 키워드로 useState를 불러온다.
import { useState } from "react";- useState를 컴포넌트 안에서 호출해준다. useState를 호출한다는 것은 "state" 라는 변수(이름은 아무거나 지어도 된다)를 선언하는 것과 같으며 이 state 변수는 React에 의해서 함수가 끝나도 사라지지 않는다.
function CheckboxExample() {
// const [state 저장 변수, state 값 갱신 함수] = useState(상태 초기 값);
const [isChecked, setIsChecked] = useState(false);
// state 변수 -> isChecked
// state 변수의 값을 바꿀 때 사용하는 함수 -> setIsChecked
// state 변수의 초기값 -> false
}위와 같이 useState를 컴포넌트 안에서 호출해주는데, isChecked는 state 변수를, setIsChecked는 isChecked의 값을 바꿀 때 사용하는 함수를 의미한다.
useState뒤의 ()안에는 state 변수의 초기값을 넣어줄 수 있다. 위의 코드에서의 초기값은 false이다
3. state의 값을 갱신하려면 state 변수를 갱신할 수 있는 함수, 위의 코드에서는 setIsChecked 함수를 호출한다.
....
const handleChecked = (event) => {
setIsChecked(event.target.value);
}
return (
<div className="App">
<input type="checkbox" checked={isChecked} onChange={handleChange} />
// input[type=checkbox] JSX 엘리먼트의 값 변경에 따라 isChecked가 변경이 되어야 한다
// 값이 변경될 때 onChange 이벤트가 발생한다.
<span>{isChecked ? "Checked!" : "Unchecked!"}</span>
</div>
);사용자가 체크박스의 값을 변경하게 되면 onChange 이벤트가 이벤트 핸들러 함수, handleChecked를 호출하고 이 함수가 setIsChecked를 호출하게 된다.
그렇게 setIsChecked 함수가 호출되면 호출된 결과에 따라 isChecked 변수가 갱신되며, React는 새로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 랜더링한다.
state 사용시 주의할 점
// 아래와 같이 강제로 변경하면 안된다!!
state.unshift(1);
state[1] = 2;
state = 'wrong state!';React state는 상태 변경 함수 호출로 변경해야 한다. 즉, 강제로 변경을 시도하면 안된다.
강제로 변경할 시에는 리렌더링이 되지 않는다거나 state가 제대로 변경되지 않는다
3. React 데이터 흐름
React의 개발 방식의 가장 큰 특징 -> 컴포넌트 단위로 시작한다는 것이다. 먼저 컴포넌트를 만들고 다시 페이지를 조립해나간다. 즉, 상향식으로 앱을 만든다.
이 경우 테스트가 쉽고 확장성이 좋다.
컴포넌트는 컴포넌트 바깥의 props를 이용해 데이터를 마치 argument 혹은 attribute 처럼 전달받을 수 있다. 즉, 데이터를 전달하는 주체가 부모 컴포넌트가 되는데, 이는 데이터 흐름이 하향식임을 의미한다.
