STATE2 state Lifting state를 활용하다보면 같은 값을 공유하고 싶은 컴포넌트가 생긴다. 이 컴포넌트에서 입력한 값이 다른 컴포넌트에서도 반영되길 바라는 것. props를 떠올릴 텐데 좋은 접근이다. 다만 props는 형제 요소에겐 줄 수 없다. 이때 필요한게 state lifting이다. 버튼을 누를 때 1씩 늘어나는 컴포넌트와, 10씩 늘어나는 컴포넌트로 예시를 들어본다. 먼저 메인페이지를 만들고 컴포넌트를 만들었다. 그리고 각각 함수를 설정했다. index.jsx import Count_first from "./Count_first"; import Count_second from "./Count_second"; export default function Main() { return ( ); } Count_first.j.. 2022. 9. 26. React state, prev & props, children 별도 상태관리 라이브러리를 사용하지 않는다면 리액트에서 함수 다음으로 많이 사용하는 게 바로 state인 듯하다. 모달을 열고 닫을 때나, 어떤 값을 저장하고 뺄 때나, 특정 변화를 자식 컴포넌트에서 작동 시키고 싶을 때 등 state가 항상 쓰인다. state는 값을 저장하는 변수와 저장 값을 업데이트할 수 있는 함수가 한쌍으로 이뤄져있다. 한 단어로 말한다면 상태관리기능이다. 리액트에서는 이를 hook이라 부른다. (hook은 특정 기능을 수행하는 함수 또는 기능 모음을 가리키는 리액트 용어다.) state는 말로 설명하기보다 코드로 보는 게 이해가 빠르므로 코드부터 보자. useState import { useState } from "react"; export default function Coun.. 2022. 9. 17. 이전 1 다음
