벌써 코드캠프 3주차가 끝나간다. 이제는 거의 해탈의 경지가 된거같다. 코딩하는 습관이 잡혔다고 할까..?
하루배우고 하루 적용하고 하는 나날의 시간들이라 배우는 속도는 빠른거같아서 좋다.
자신에게 채찍질을 잘하는 사람들에게 너무 추천을 해주고 싶다.
오늘은 리액트의 기초이자 가장 핵심이라고 할 수 있는 State와 Props에 대하여 알아보도록 하자
State란?
-일반적으로는 컴포넌트 내부에서 변경 가능한 데이터를 관리해야할 때에 사용한다.
-props의 특징은 컴포넌트 내부에서 값을 바꿀 수 없는데 값을 바꿔야 하는 경우가 분명 존재한다. 그럴 때 사용하는 것이 바로 state다.
-값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다.
-컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다고 볼 수 있다.
state 사용방법
state를 사용하기 위해서는 먼저 useState라는 것을 inport해야 한다.
const [데이터, 데이터변경함수] = useState(초기값(생략가능))
ex ) const [count, setCount] = useState(0)이런식으로 사용된다.
여기서 count의 값을 바꾸고자 할때 데이터 변경함수인 setCount를 사용하면 되는데
const upCount = () => {
setCount(count + 1)
}
<button onClick={upCount}>카운트 1증가</button>이렇게 setState를 사용하여 데이터를 원하는 값으로 바꿔줄 수 있다.
다은은 props에 대해 살펴보자
Props란?
-props는 프로퍼티(properties)의 줄임말이다.
-상위 컴포넌트가 하뤼 컴포넌트에 값을 전달할때 사용한다. (단방향 데이터 흐름)
-프로퍼니틑 수정할 수 없다 (자식의 입장에서는 읽기 전용 데이터)
props 사용방법
props에 문자열을 전달할 때는 ("")를 이용해서 전달하고 그 외에 값을 전달할 때는 중괄호({})를 사용함.
예시
const Parents = () => {
return (
<>
<Child name="땅오"/>
</>
)
}
export default Parents;const Child = (props) => {
return (
<>
<div>이름은 {props.name} 입니다.</div> // props.name에 '땅오'가 들어감.
</>
)
}
export default parents;이렇게 props라는 객체로 전달되어 값을 전달해 줄 수 있다.
문자열이 아닌 변수의 경우는
const Parents = () => {
const name = "땅오"
return (
<>
<Child name={name}/>
</>
)
}
export default Parents;이렇게 중괄호({})를 통해 전달할 수 있다. (똑같은 결과가 출력 됨.)
결론
state - 컴포넌트의 상태를 관리하는 것
props - 부모컴포넌트에서 자식 컴포넌트로 값을 전달하는 것 (단반향 흐름!!ㅂ)
state나 props 리액트의 기초이자 핵심을 잘 배워서 뿌리를 튼튼하게 해놓자. 아디오스!!
