리액트 썸네일형 리스트형 [리액트 스터디] - Choosing the State Structure State를 얼마나 잘 구조화 하는가가 리액트 숙련도를 좌지우지함State 구조화 원칙state를 만들 때 더 나은 선택을 할 수 있는 선택지들이 있음 1. 연관된 state 그룹화하기 => 단일 state로 변수를 하나로 합치도록 병합하기2. state의 모순 피하기 => 여러 state가 모순되면 제거하기3. 불필요한 state 피하기 => props나 기존의 state 변수로 일부 정보를 계산할 수 있으면, 제외하기4. state의 중복 피하기 => 동기화 유지가 어려우니 중복을 없애자5. 깊게 중첩된 state 피하기 => 업데이트가 쉽지 않으니, 평탄화를 하자 결국 최종 목표는 오류 없이 상태를 쉽게 업데이트 하는 것임 아이슈타인이 아래와 같은 말을 했다.당신의 state를 가능한 단순하게 만들.. 더보기 [리액트 스터디] - Reacting to Input with State 리액트는 UI를 직접 조작하는거 대신 State를 따라서 UI를 변경하게 된다.선언형 UI와 명령형 UI 비교명령형 프로그래밍이 뭘까 ? 예시를 사용자가 폼을 제출한다고 했을 때로 하나 들어보자 - 폼에 무언가를 입력하면 "제출" 버튼이 활성화될 것- "제출" 버튼을 누르면 폼과 버튼이 비활성화되고 스피너가 나탈 것- 네트워킹 요청이 성공하면 폼은 숨겨질 것이고, "감사합니다." 메시지가 나타날 것- 네트워크 요청이 실패하면 오류 메시지가 보일 것이고 폼은 다시 활성화될 것 위 요청대로 개발을 하면 명령형 프로그래밍임 정확한 지침에 따라 코드를 자겅해야 JS가 정상적인 동작을 하게 되는 구조 UI가 복잡해질수록 구현 난이도가 어려워짐 그러니 UI 조작은 리액트에게 맡기고, 무엇을 보여주고 싶은지만 선언.. 더보기 [리액트 스터디] - Updating Arrays in State 배열 JS에서는 변경 가능하지만, state로 저장할 때에는 변경할 수 없도록 처리해야함. 객체랑 마찬가지로, state에 저장된 배열을 업데이트하고 싶을 땐, 새 배열을 생성한 뒤 이를 이용하여 업데이트해야함. 학습내용- React state에서 배열의 항목을 추가, 삭제 또는 변경하는 방법- 배열 내부의 객체를 업데이트하는 방법- Immer로 덜 반복해서 배열을 복사하는 방법변경하지 않고 배열 업데이트하기JS에서 배열은 객체의 다른 종류임. 객체처럼 React state에서는 배열도 읽기 전용이 되어야함. 재할당 이런거 하지마셈 (arr[0] = 'test' / push() / pop()) 왜 state 변경 권장하지 않을까 ?1. 디버깅 힘듦, 렌더링 사이에 state가 어떻게 바뀌었는지 명확하게.. 더보기 [리액트 스터디] - Queueing a Series of State Updates state 변수를 설정하면 큐에 다음 렌더링이 들어간다고 했음. 근데, 다음 렌더링을 큐에 넣기 전에 그 값을 가지고 다른 수행도 하고 싶을 때가 있을거 같은데,,,, 이 시점을 어떻게 조절할 수 있을까 ? React state batches 업데이트 react.dev - CodeSandboxreact.dev using react, react-dom, react-scriptscodesandbox.io 이 전 장에서 한 번에 3씩 증가하는게 아닌 1씩 증가하는 것으로 알 수 있었다. state의 값은 그 시점의 값으로 고정되어 있기 때문이라 했는데, 한 가지 더 알아둬야 할 점이 있다. React는 state 업데이트 하기 전 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다. 어떤 손님이 "양념 .. 더보기 Flux 패턴 MVC 패턴을 보완하기 위해서, FaceBook에서 만든 아키텍처를 소개해봅시다. 간단하게 단방향 데이터이고, Action이 발생하면 Dispatcher에 의해 Store에 전달되고, Store가 변경되면, View가 변경되는 패턴입니다. 조금 더 자세하고, 쉽게 알아보도록 합시다 ! 해당 글은 아래 글을 참조하여 작성한 글입니다. ui.toast.com/weekly-pick/ko_20151027 Flux 카툰가이드 | TOAST UI :: Make Your Web Delicious! Flux 카툰가이드 원문 : https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207#.9nbhrj3of 플럭스는 현재 웹개발에 대한 토픽들중에 가장 유명하지만 이것을.. 더보기 이전 1 다음
