2019-09-25 TIL
Redux state
Redux state는 전역 state로 어떤 컴포넌트라도 store를 통해서 접근가능하고 Container 컴포넌트에 데이터를 집중화시켜 하위 컴포넌트에서 데이터를 접근하지 않더라고 state를 쉽게 전달할 수 있게 해줍니다.
Redux가 탄생하게 된 이유는 간단하게 수많은 state를 관리하기 위해서입니다. 프로젝트 규모가 커지고 복잡해지면서 상태가 많아지고 이를 관리하기 힘들어져 상태가 언제, 왜, 어떻게 변화되었는지 알기 어렵고 관리가 힘들어져 이를 관리하고자 Redux가 만들어졌습니다.
State 기간
Short-term - 빠르게 변화하는 데이터
UI의 텍스트 필드의 문자, 또는 리스트의 아이템을 필터링 하는 것과 같이 빠르게 변화 일어나고 프로젝트의 전반적으로 변화를 주지 않는 데이터는 지역 상태(Local State)를 사용하는 것이 유리하다.
Medium-term - 앱 실행동안 유지되는 데이터
API를 통해서 로드된 데이터나 새로고침 이전까지 유지되어야 하는 데이터로 프로젝트의 전반적으로 영향을 주는 데이터는 Redux Store(State)를 사용하는 것이 유리하다. 예를 들면, 전역으로 사용되는 유저 정보나 submit 양식 제출하여 사용자 프로필 정보 업데이트를 해야하는 경우
Long-term - 여러 페이지간의 방문, 새로고침 동안 유지되어야 하는 데이터
이 경우에는 서버의 데이터베이스 또는 브라우저의 로켈 스토리지(local storage)에 저장하여 사용한다.
localStorage 사용 방법
localStorage는 브라우저를 저장소로 사용하는 개념입니다.
session과 비슷하지만, session과 구분되는 점은 브라우저가 종료되도 정보가 지워지지 않고 남아있다는 점입니다. (session에 저장된 정보는 브라우저가 종료되면 자동으로 삭제됩니다.)
localStorage에 저장할 수 있는 데이터 타입은 String입니다.
따라서 우리가 어떤 객체를 저장하고자 할 때 객체를 JSON.stringfy 메소드를 이용해 문자열로 바꿔줘야 합니다.
반대로 localStorage에 저장된 데이터를 사용하고자 할 때는 JSON.parse 메소드를 이용해 문자열을 객체로 복원시켜 사용해야 합니다.
localStorage 데이터 저장
localStorage.setItem('저장소명', (JSON.stringfy(문자열 데이터))
localStorage 데이터 꺼내기
localStroage.getItem(JSON.parse('저장소명'))
localStroage 데이터 제거
localStorage.removeItem('저장소명')
localStroage 데이터 초기화
localStorage.clear()
