왕가's history

본인이 작성한 흐름 따라 값이 변할 것으로 예상하고 setState를 사용했을 때, 바로 다음줄에 값이 변하지 않는 것을 종종 확인할 수 있습니다. 이는 useState설명할 때처럼 비동기로 동작하기 때문입니다. (관련 설명은 아래 글 확인하시면 될 것 같습니다.) 2023.06.04 - [Front-End/React] - React] React 란...? 2023.06.06 - [Front-End/React] - Hook) useState 그렇다면 useState를 동기로 처리하려면 어떻게 해야 될지 2가지 방법이 있습니다. useEffect 사용 HTML 삽입 미리보기할 수 없는 소스 useEffect를 사용하여 의존성을 부여하고, content가 바뀔 때마다 갱신해 주면 됩니다. 2023.06.20..

useReducer 단순히 state 값을 저장하는 것이 아니라, state를 바꾸기 위한 로직, 함수 등을 관리할 수 있는데, 이럴 때 useReducer를 사용하면 관리에 용이합니다. 간단히 말해 state를 바꾸기 위한 여러 함수들을 하나로 묶어서 관리할 수 있다고 보면 됩니다. const [state, dispatch] = useReducer(reducer, initialState); 하나의 state에 dispatch를 통해 값을 변환해 줍니다. (dispatch가 setState역할을 한다고 보면 될 듯싶습니다.) state : 컴포넌트에서의 state dispatch: action을 발생하는 함수 (setState와 비슷) reducer : reducer 정의 initialState : 초기..

useState Component가 가지고 있는 상태값으로 컴포넌트 내부에서의 동적 데이터입니다. 흔히 많이 사용되는 변수라고 생각하면되지만, 아래와같은 특징이 있기 때문에 변수랑은 느낌만 같지 많이 다릅니다. const [변수이름, set변수이름] = useState(초기값); set변수이름은 다른 이름을 넣어도 되고, 선언하지 않아도 상관없습니다. 변수에 값을 직접 대입하는 것이 아니라, set을 통해 값을 대입해줍니다. state값이 변하게 되면 UI가 리렌더링 된다. useState는 비동기로 동작한다. 예 HTML 삽입 미리보기할 수 없는 소스 input태그의 값을 입력해 주면서 content라는 state값을 확인할 수 있게 작성하였다. content선언할 때는 "" 빈문자열로 초기값을 설정해..