💡 특징
✔ Props
- 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값
- 컴포넌트의 속성(property)을 의미하고 (properties) 줄임말
- 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값
- 부로부터만 전달받아 변하지 않는 값입니다. 그래서 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체
1.부모 컴포넌트 APP 안에 자식 Main 컴포넌트를 선언하고 속성값을 설정한다.
2. probs 는 객체이므로 {key.value} 형식처럼 작성한다.
3. Main에 text 는 작명한것임
Const App( () => { // 1.
<Main text="this is probs" />
} )
Const Main((probs) => { // 2.
<div>{probs.text}</div> // "this is probs"
})변수로 값을 줄 수도 있고, 여러개시 배열안에 넣어 사용가능
Const App( () => {
// 나머지태그는 ..생략
const text1 = "probs 별거"
const text2 = " 아니네"
<Main text={[text1,text2]} />
} )
Const Main((probs) => {
<div>{probs.text}</div> // "probs 별거 아니네"
})✔ State
- 컴포넌트 내에서 변하는 유동적 데이터를 다룰때 사용하고 컴포넌트의 상태를 나타낸다.
- 앱처럼 새로고침없이 재 렌더링 가능하다.
- props는 함수 매개변수처럼 컴포넌트에 전달되는 반면 state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리
import {useState} from "react";상단에useState를 호출한다.- 변수처럼 선언한다. 할당할 변수,갱신할 함수,초기값을 설정한다.
const [변수,갱신함수] = useState(초기값)
function clothing(){
const [outer,setOuter] = useState('남자패딩');
}
<div>{outer}</div> // "남자패딩"
<div>{setOuter("여자패딩")}</div> // "여자패딩"서로연결 되어있어서 setOuter(변경할값) 설정하면 초기값이 바뀐다.
❗ 정리
컴포넌트 내에서 자주 변하는 데이터에 state를 사용하여 새로고침없이 재랜더링한다.
자주 바뀌지는 않지만 코드를 반복 적으로 작성해야 하는경우 probs 로 재사용한다.
부모 컴포넌트에 있는 데이터를 사용할때도 probs로 사용가능하다.
Run Start 🔥