props vs state, React.useState기본예제

props : refers to the properties being passed into a component in order for it to work correctly, similar to how a function receives parameters: "from above." A component receiving props is not allowed to modify those props.
(they are immutable)

state: refers to values that are managed by the component, similar to variables declared inside a function. Any time you have changing values that should be saved/displayed, you'll likely be using state.

state에 관한 문제

1. How would you describe the concept of "state"?

A way for React to remember saved values from within a component.
This is similar to declaring variables from within a component,
with a few added bonuses (which we'll get to later)

2. When would you want to use props instead of state?

Anytime you want to pass data into a component so that
component can determine what will get displayed on the
screen.

3. When would you want to use state instead of props?

Anytime you want a component to maintain some values from
within the component. (And "remember" those values even
when React re-renders the component)

4. What does "immutable" mean? Are props immutable? Is state immutable?

Unchanging.Props are immutable.State is mutable.

useState에서 조금 더 알아보자
밑의 코드를 살펴보면

import React from "react"

export default function App() {
    const result = React.useState("Yes")
    console.log(result)
    return (
        <div className="state">
            <h1 className="state--title">Is state important to know?</h1>
            <div className="state--value">
                <h1>{result[0]}</h1>
            </div>
        </div>
    )
}

이렇게 React.useState("Yes") 해주면
array로 return해주는데 바꾸고 싶은 여기서 "Yes"이게
array의 첫번째애가 되는터라

  <h1>{result[0]}</h1>

이렇게 써준거임..
근데 이걸 이렇게 안쓰고 destruturing해줄 수 있는데

import React from "react"

export default function App() {
    const [isImportant, func] = React.useState("Yes")
    console.log(isImportant)
    return (
        <div className="state">
            <h1 className="state--title">Is state important to know?</h1>
            <div className="state--value">
                <h1>{isImportant}</h1>
            </div>
        </div>
    )
}

Array에 우리가 원하는 yes가 array 첫번째 오고 그 다음에 function이 오니까 저렇게 func 써준다음에
destructure해준것!!! 그럼 destructure해줄때
써준 애 이름만 {}사이에 써주면 된다.
아하

  const [isImportant, func] = React.useState("Yes")

이거는 initial state를 generate한거고
보통 쓸때 저렇게 Func를 쓰는게 아니라

  const [isImportant, setIsImportant] = React.useState("Yes")
    setIsImportant("No")

이렇게 set을 써주고 그 다음에 새로 state해줄걸 써줌..근데 보통 저렇게 바로 다음에 써주는게 아니라
예를 들어 뭘 클릭하면 저게 나오게 하기 이런식으로 작동됨. 그런식으로 작동한 코드의 예시를 살펴보자

import React from "react"

export default function App() {
    const [isImportant, setIsImportant] = React.useState("Yes")
    /**
     * Challenge: 
     * 1. Create a function called `handleClick` that runs
     *    setIsImportant("No")
     * 2. add a click event listener to the div.state--value
     *    that runs `handleClick` when the div is clicked.
     */
    
    function handleClick() {
        setIsImportant("No")
    }
    
    return (
        <div className="state">
            <h1 className="state--title">Is state important to know?</h1>
            <div className="state--value" onClick={handleClick}>
                <h1>{isImportant}</h1>
            </div>
        </div>
    )
}

onClick으로 {handleClick}설정해주고
function에 새로운 state 써준다.
혼자 구현해보려고 할때 return을 나도 모르게 써서
작동안되었었음... return 쓸 필요없이 바로
새로운 state 적어주면 됨.

 setIsImportant("No")

이렇게...