🐶🦶 BLOG

리덕스 미들웨어의 동작 흐름 리덕스 미들웨어를 왜 써야하나? 기존의 리덕스 액션 발생 -> 디스패치를 통해 스토어에게 상태변화 필요성 알림 ⬇ 이 사이에 처리하고 싶은 작업이 있다면? ex) 어떤 액션이 발생했는지 로그 남기기, 액션 취소, 또 다른 액션 발생 등 리덕스 : 동기적인 흐름을 통해 동작 동기적 흐름이란? 액션 객체 생성, 디스패치가 액션 발생을 스토어에게 알림, 리듀서는 정해진 로직에 의해 액션을 처리한 후 새로운 상태값 반환하는 과정 하지만, 동기적 흐름만으로 처리하기 힘든 작업이 있다 ex) 시간 딜레이시켜 동작하게 하기, 외부 데이터 요청하여 그에 따른 응답을 화면에 보여주기 등 이런 작업들은 어떻게 해야하나? 리덕스 미들웨어 사용! 대표적인 리덕스 미들웨어는 무엇? 직접 만들어서 원..

리덕스란? 자바스크립트 어플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구 리액트 상태 관리란? 리액트의 데이터 흐름은 단방향 자식은 부모의 상태를 props로 전달받음 부모의 상태값이 변하면, 자식은 변화된 상태에 맞게 data 혹은 UI를 변경 == 리렌더링 -> 부모도 리렌더링, 자식도 리렌더링 즉, 우리는 상태 관리에 있어서 상태 구성요소를 최소화하기 위해 노력해야 함. TIP!- 리랜더링 상황 1. 자신의 state값 변경 2. 부모 컴포넌트의 리렌더링 3. 자신이 전달받은 props값 변경 4. 강제 업데이트(forceUpdate) 실행될 때 리덕스 왜 써야하나? 리액트로 만든 SPA는 data 혹은 UI의 변화가 복잡, 다양해지는 경우가 많음 -> 어떻게 효율적으로 관리? 리덕스..

Hook은 다음 2가지 규칙을 따른다. 1. 최상위(at the top level)에서만 Hook 호출 반복문, 조건문, 중첩된 함수 내에서 실행X 조건부로 effect를 실행하길 원한다면 아래와 같이 조건문을 hook 내부에 넣을 수 있다. useEffect(function persistForm() { // 👍 더 이상 첫 번째 규칙을 어기지 않습니다 if (name !== '') { localStorage.setItem('formData', name); } }); 제공된 lint 규칙을 활용하면 이 문제는 해결됨! -> eslint-plugin-react-hooks 2. React 함수 컴포넌트 내에서만 Hook 호출 일반 JS에서 Hook 호출 X 직접 작성한 custom Hook 내에서는 훅 호출..

side effect ( = effect) 기능 데이터 가져오기 구독 설정하기 수동으로 리액트 컴포넌트의 DOM 수정하기 종류 정리(clean-up)가 필요한 것 그렇지 않은 것 정리(Clean-up)를 이용하지 않는 Effects 리액트가 DOM을 업데이트한 뒤 추가로 코드를 실행해야 하는 경우 네트워크 리퀘스트 DOM 수동 조작 로깅 -> 실행 이후 신경 쓸 것이 없기 때문에! useEffect useEffect가 하는 일? -> useEffect Hook을 이용하여 우리는 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말함 리액트는 우리가 넘긴 함수(effect)를 기억했다가 DOM 업데이트를 수행한 이후에 불러낼 것 문서 타이틀 지정, 데이터 가져오기, 명령형 API 불러내기 등..

Hook과 함수 컴포넌트 함수 컴포넌트 - 둘 다 가능 const Example = (props) => { // 여기서 Hook을 사용할 수 있습니다! return ; } function Example(props) { // 여기서 Hook을 사용할 수 있습니다! return ; } state가 없는 컴포넌트 hook은 state를 함수 안에서 사용가능하게 해줌 hook은 클래스 안에서 동작 X 하지만 클래스를 작성하지 않고 사용 가능 Hook이란? 특별한 함수. 예를 들어 useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줌 언제 Hook 사용? 함수 컴포넌트 안에 state를 추가하고 싶을 때 state 변수 선언 함수 컴포넌트는 this를 가질 수 없기 때문에 this.state를..