[React] Props & React State

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

 

🦍Props

• 컴포넌트의 속성을 의미한다
• 성별이나 이름처럼 변하지 않는 부모(상위)컴포넌트로 부터 전달받은 값을 말한다
• 갹체형태를 갖는다.
• props는 함부로 변경될 수 없는 읽기 전용 객체이다.

props를 사용하는 방법은 아래 3단계를 따른다.

1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의 한다.
2. props를 이용하여 정의된 값과 속정을 전달한다.
3. 전달받은 props를 렌더링 한다.

import './App.css';

function App() {
    return (
        <div>
        <h1>Hello</h1>
        <World text ={"World!!"} tag={"태그태그~"}/>
        </div>
    )
}

function World(props){
    console.log(props)
    return(
        <div>{props.text}</div>
    )
}

export default App;

World함수는 props를 인자로 받고있다.
위에 App함수에서 World컴포넌트를 요청할 때, text엔 "World"를 tag에는 "태그태그~"를 속성으로 받으며 요청했다.
콘솔로그에 World컴포넌트가 받은 인자를 출력하였다.
객체 형식으로 출력 되고 있고, `tag: "태그태그~" text: "World!!"`로 props에 속성이 잘 전달 된것을 확인 할수 있다.

{props.text}이 작동하면서 text의 World!! 가 출력 된다.

props속성의 이름은 임의로 지정할 수 있고, 속성은 하나 이상 지정 가능하다.

 

🦍State

Props는 변하지 않는 상태를 다룬다 배웠습니다.
변하는 값은 State를 통해 다뤄야 합니다.

여기서 변하는 값이란. 체크박스를 체크하거나, input에 텍스트를 넣는 등 동적으로 상태를 다루는 것을 말합니다.

🐒useState

import './App.css';
import {useState} from "react";

function App() {
    const [check, setCheck] = useState(false);
    const onCheck = (event) => {
        setCheck(event.target.checked)
    }
    return (
        <div>
            <input
                type="checkbox"
                onChange={onCheck}
            />
            {check ? <span>선택O</span> : <span>선택X</span>}
        </div>
    )
}

export default App;

input으로 checkbox를 생성했습니다.
속성에 onChang를 넣어 체크박스 변화를 확인합니다.
import {useState} from "react";로 useState를 사용 가능하게 합니다.

 

const[check,setCheck]=useState(false);
두 개의 요소를 갖는 요소를 볼수 있는데, 앞에 check 는 값을 저장할 변수이고, setCheck 는 check변수 값에 영향을 주는 함수이다.
useState안에 false는 초기 값이다. 다음 설정에서 check = false 이다

const onCheck = (event) => {setCheck(event.target.checked)}

 

onCheck 는 checkbox가 늘렸을 때 동작하는 함수이다.
함수를 보면 setCheck에 event.target.checked가 보인다. 여기서 event인자는 checkbox가 상태가 변할때 나오는 리턴값을 받고,event.target.checked라면 눌렸을 경우 true 안눌렸을 경우 false를 출력한다.

말이 조금 이상한데 다음 자리에 console.log(event) 작성해보면 동작 원리를 쉽게 확인 할수 있다.

 

{check ? <span>선택O</span> : <span>선택X</span>}
삼항연산자로 check가 ture일 경우 선택O, false일 경우 선택X를 화면에 보인다.

useState를 사용하면 상태가 변경되면 새롭게 호출되고, 리렌더링을 합니다.

 

상태를 저장하는 변수는 상태 변경 함수를 통해서만 변경을 해줍니다.
상태 변경 함수 사용은 React와 개발자의 약속이기 때문에 지켜주셔야 한다.
강제로 변경을 시도하면, 리렌더링이 되지 않는다거나, 상태가 제대로 변경되지 않습니다.
아까 함수에서 상태를 저장한 변수는 check이고, 상태 변경 함수는 setCheck이다
각각을 정의한 명칭보다 위치가 중요하다