본문 바로가기

state

(2)
<FE> 프론트엔드 상태 관리와 역사 1. 상태관리란 * 소개 - 프론트엔드하면 상태관리라는 단어를 빼놓을 수 없다. 상태를 효율적으로 관리하고 보여 주는 것이 프론트엔드 역량의 핵심이라 해도 과언이 아닐 것이다. - 그렇다면 도대체 상태가 무엇이고, 상태가 왜 프론트엔드에서 중요할까. 이러한 필요성들이 어떻게 어떤 목표를 가지고 발전해왔을까. 오늘의 포스팅은 이런 고민에서 시작하게 되었다. * 상태란? - 프론트엔드에서 상태란 주로 유저 정보나 UI에 영향을 미치는 동적으로 표현되는 데이터이다. 특정 컴포넌트안에서 관리되는 로컬 상태와 여러 컴포넌트에서 관리되는 전역 상태로 구분지을 수 있다. 말로는 어려우니 아래의 예시를 보자. - 위는 필자가 최근 진행했던 프로젝트에서 할일을 보여주는 부분을 캡쳐한 것이다. 회사 내에서 개인이 자신의 ..
<리액트 기초> 리액트와 Hooks * Hooks 소개 - 2018년 리액트에서 Hooks업데이트 이후 최근의 리액트는 클래스가 아닌 Hooks를 권장하고 있다. - 기존에도 함수형 컴포넌트가 사용 가능하긴 했으나 state 관리할 때에는 클래스를 써야 했었다. - Hooks의 업데이트 이후 함수형 컴포넌트를 사용하더라도 setstate와 ref기능들을 사용 가능해졌다. - 참고로 함수형 컴포넌트 = Hooks는 아니다. 기존에도 state를 안 쓸 경우에는 함수형 컴포넌트가 더 선호 되었다. hook은 함수컴포넌트가 아닌 useState나 useRef, useEffect등을 의미한다. * Hooks 사용 const GuGuDan = () => { const [first, setFirst] = React.useState(Math.ceil(..