[5분] useState

Q. useState가 뭐냐! (setState를 모르신다고 가정하고 문서가 작성됐습니다)

useState는 훅인데, 이 훅은 함수형 컴포넌트에서 스테이트를 쓸 수 있게 해줍니다.
일단 훅, 함수형 컴포넌트 등등 어려운 이야기가 나오는데,
1.
2.
함수형 컴포넌트
훅이란, 함수의 일종으로서, 스테이트를 쓸 수 있는 형태의 함수 입니다. 원래는 함수는 pure 함수였지만, 함수에서 스테이트를 쓸 수 있도록 진화 한 형태죠.
함수형 컴포넌트는 class가 아닌 것이에요. 이게 뭐냐! 이러시면, constructor 같은 것도 필요 없고, this같은 것도 필요없는 아주 깔끔한 component에요. 아래 예시를 보면
const SomeFunctionalComponent = ({inputA, inputB}) => { return <> {inputA}, {inputB} </> }
JavaScript
inputA, inputB를 프린트 해주는 예제
이거 자체가 함수형 컴포넌트죠. 이 함수형 컴포넌트에서 버튼을 하나 만들고, 그 버튼을 누를 때마다 cnt값이 1이 늘어나는 기능을 넣고 싶다면,
cnt라는 변수가 하나 필요하고,
버튼을 하나 추가 하고 그 버튼은 현재 cnt값을 1증가 시키는 기능
이 필요합니다. 이런 경우에 cnt는 단순한 변수가 아니라 state입니다. 한국말로는 상태!죠. 이 상태는 1씩 증가할겁니다. 그리고 증가가 되고 나면, 그 state를 사용하고 있는 함수가 다시 설정 됩니다 (전문용어로는 rerendering이라고 합니다)
const SomeFunctionalComponent = ({inputA, inputB}) => { const [cnt, setCnt] = useState(0); return <> <div onClick={evt => {setCnt(cnt => cnt + 1}>+1</div> {inputA}, {inputB} </> } export defalut SomeFunctionalComponent
JavaScript
const [cnt, setCnt] = useState(0)
이 부분에서, bracket안에 있는 왼쪽 값은, 우리의 state, 오른쪽 값은 state를 업데이트 할 수 있게 해주는 함수 입니다. 이름은 마음대로 지어도 되지만, convention으로 set{State}로 하시면 됩니다.
숫자 1을 클릭을 하면 onClick 콜백을 통해 setCnt가 동작합니다. → cnt값이 변합니다 → cnt를 사용중인 SomeFunctionalComponent는 다시 렌더링 됩니다.
이 function component를 한 번 우리의 App 컴포넌트에서 불러와 보겠습니다.
불러올 수 있는 이유는, export default 해줬기 때문입니다.
import SomeFunctionalComponent from './SomeFunctionalComponent' const App = () => { return <> <div>Hello!</div> <SomeFunctionalComponent/> </> }
JavaScript
여기서 import라는 개념이 나오는데, 경로에 맞춰서 '../../' 을 잘 설정해주면 됩니다.