리덕스의 장점 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적으로 관리한다. 컴포넌트 끼리 상태 공유시 손쉽게 상태값을 전달하거나 업데이트가 가능하다. 단순히 전역 상태관리만 한다면 Context API로 충분하지만, 프로젝트의 규모가 클 수록 리덕스를 사용해 상태를 더 체계적으로 관리할 수 있다. →→ 코드의 유지보수성을 높이고 작업효율( 편한 개발자 도구 지원, 미들웨어 기능 지원 )을 극대화 한다. 1. 개념 정리 액션 상태에 변화가 필요하면 액션이 발생한다. 객체로 표현되며 다음과 같은 형태를 갖는다. 대부분 이름은 대문자로 작성하며 고유성을 갖아야 한다. { type: 'Toggle_Value' } // 액션 객체는 type 필드를 갖어야 한다. 액션 생성 함수 액션 객체를 만..
React
Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터(로그인 정보, 환경 설정, 테마 등) 가 있을 때 유용하게 사용된다. 리덕스, 리액트 라우터, styled-components 등의 라이브러리들은 Context API를 기반으로 구현된다. 1. Context API를 사용한 전역 상태 관리 흐름 리액트 애플리케이션은 컴포넌트간 데이터를 props로 전달하기에 필요한 데이터가 있을 때 주로 최상위 컴포넌트인 App의 state에 넣어 관리한다. → 항상 최상위 컴포넌트에서 목표하는 컴포넌트에 정보를 전달하기 까지 연결된 컴포넌트를 여러번 거쳐야한다. 이런 방식은 유지 보수성이 낮아질 가능성이 있다. 이러한 문제를 해결하려면 Context API를 사용하면 된다. Context API를 사..
1. 뉴스 뷰어를 빌드하기 전에 사용되는 비동기 작업과 다른 기술에 대한 정리를 해보자 서버의 API를 사용할 때 네트워크 송수신 과정에서 시간이 걸리기에 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리하는 방식이 비동기 작업 방식이다. 비동기적으로 처리한다면 웹 애플리케이션이 멈추지 않고 동시에 여러 가지 작업을 진행하고, 대기 중에도 다른 함수를 호출할 수 있다. 콜백함수 사실 이 기술(콜백 함수)은 너무 많이 중첩하여 사용하게 되면 코드의 가독성이 나빠서 설명은 되도록이면 안 하겠다..... Promise async/await 아래의 2가지 종류는 이전에 작성했던 글을 참고하자. 2. 코드 및 설명 코드 : https://github.com/Gotkwondo/just_do_it/tree/..
1. SPA란? SPA(Single Page Application) : 한 개의 페이지로 이루어진 애플리케이션 MPA(Multi Page Application) : 여러 개의 페이지로 이루어진 애플리케이션 웹에서 제공하는 정보가 많기 때문에 새 화면을 보여줄 때 마다 서버측에서 성능상의 문제가 발생할 수 있다. 트래픽이 많이 나올 수 있고, 서버에 높은 부하가 걸릴수 있다. 라우팅 : 다른 주소에 다른 화면을 보여주는 것 리액트 라이브러리에는 내장 되있지 않기에 API를 직접 사용해 관리하거나, 라이브러리를 사용해 쉽게 구현할 수 있다. SPA의 단점 앱의 규모가 커지면 JS파일이 너무 커진다. 페이지 로딩시 실제 방문하지 않을 수 있는 페이지의 스크립도 불러오기 때문이다. JS를 이용해 라우팅을 관리하..
구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하며 업데이트가 가능하다. 펼침연산자(...)를 자주 사용하여 기존값은 유지하되 원하는 값을 새로 지정하면 코드가 복잡해진다. 1. immer 사용법 - immer를 사용하지 않고 불변성 유지 ...(펼침연산자)를 이용하다 보니 가시성이 떯어지고 코드가 복잡해진다. - 사용법 import produce from 'immer'; const nextState = produce(originalState, draft => { draft.somewhere.deep.inside = 5; }); produce 함수는 2가지 파라미터를 받는다. 첫번째는 수정하고 싶은 상태 두번째는 상태를 어떻게 업데이트할 지 정의하는 함수 두번째 파라미터로 전달되는 함..
10장에서 만든 애플리케이션을 최적화 해보자 11.1 많은 데이터 렌더링 하기 더보기 function creatBulkTodos() { const array = []; for (let i = 0; i { const [todos, setTodos] = useState(creatBulkTodos); //고윳값으로 사용될 id //ref를 사용하여 변수 담기 const nextId = useRef(2501); const onInsert = useCallback( text => { const todo = { id: nextId.current, text, checked: false, }; setTodos(todos => todos.concat(todo)); nextId.current += 1; // nextId ..
