728x90 반응형 source-code/React44 리액트를 다루는 기술 _ 17장 월요일이라 피곤한 건지. 17장. 리덕스를 사용해 리액트 애플리케이션 상태 관리하기 React에서 Redux를 사용하면, 상태 업데이트에 관한 로직은 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는 데 도움이 된다. 또한 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수도 있다. React에서는 store 내장함수(dispatch, subscribe 등)를 사용하기보다 react-redux라는 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용한다! 설치는 이렇게! medium.com/@ca3rot/%EC%95%84%EB%A7%88-%EC%9D%B4%.. 2021. 3. 22. 리액트를 다루는 기술 _ 16장 이제 50% 다 와간다... 와우! 16장. 리덕스 라이브러리 이해하기 앞서 얼핏 들었던 리덕스! React 상태 관리에서 가장 많이 사용되는 녀석이다. 16-1) 개념 정의하기 난생처음 접하는 여러 키워드들이 등장한다..! 1. 액션 상태에 어떤 변화가 필요하면 액션(action)이란 것이 발생한다. 얘는 하나의 객체 형태며 { type: 'TOGGLE_VALUE' } 요런 형식으로 이뤄져 있다. 액션 객체는 type 필드를 반드시 가지고 있어야 하며(얘를 액션의 이름이라 생각하면 된다), 그 이외에는 이후 상태 업데이트를 할 때 참고해야 할 값들이 들어간다. (작성자 임의로 넣으면 됨!) { type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' } } { type: .. 2021. 3. 19. 리액트를 다루는 기술 _ 15장 목요일은 역시 목요일이군. 15장. Context API Context API는 React 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능! (ex 로그인 정보, 애플리케이션 환경 설정, 테마 등) 여태 사용했던 stlyed-components, 리액트 라우터 등의 라이브러리도 Context API를 기반으로 구현되어 있다. 15-1) Context API를 사용한 전역 상태 관리 흐름 이해하기 그런데 전역 상태를 관리한다는 게 무슨 뜻? 지금껏 우리는 프로젝트 내에서 환경 설정, 사용자 정보와 같이 전역적으로 필요한 상태를 관리할 때 → 주로 최상위 컴포넌트인 App의 state에 넣어 관리했다! 왼쪽 그림에 해당하는 건데... App이 지닌 value를 F나 J에 전달하려면 여러 컴포넌트.. 2021. 3. 18. 리액트를 다루는 기술 _ 14장 눈 깜짝하니 목요일이다. 14장. 외부 API를 연동하여 뉴스 뷰어 만들기 지금까지 배운 것을 바탕으로 뉴스 뷰어 프로젝트를 진행해 볼 예정! 전체 흐름은... 1. 비동기 작업의 이해 2. axios로 API 호출해서 데이터 받아오기 3. newsapi API 키 발급받기 4. 뉴스 뷰어 UI 만들기 5. 데이터 연동하기 6. 카테고리 기능 구현하기 7. 리액트 라우터 적용하기 출발! 14-1) 비동기 작업의 이해 동기적 처리 : 요청이 끝날 때까지 기다리는 동안 중지 상태 → 그동안 다른 작업 불가 비동기적 처리 : 웹 애플리케이션 멈추지 않음 → 동시에 여러 요청 처리 가능! 그런데 이미 비동기 작업을 사용해본 적이 있다! JS의 setTimeout 함수가 그 예. setTimeout이 사용되는 시.. 2021. 3. 18. 리액트를 다루는 기술 _ 13장 5시쯤 되니 정신이 혼미해진다... 흠냐. 13장. 리액트 라우터로 SPA 개발하기 13-1) SPA란? React의 핵심! 꽃! 스파! SPA는 Single Page Application의 약자로, 한 개의 페이지로 이뤄진 애플리케이션이란 의미. React와 같은 라이브러리 or 프레임워크를 통해 우선 애플리케이션을 브라우저에 불러와 실행시킨 후, 사용자와의 상호작용이 발생하면 필요한 부분만 JS를 이용해 업데이트 해주는 방식! 그런데 한 개의 페이지라면... 이용자에게 보이는 화면도 하나뿐인 것 아닌가? → No! 서버에서 사용자에게 제공하는 페이지는 한 종류이지만 해당 페이지에서 로딩된 JS와, 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있다. 이렇게 다른 주소에 다른 화면을.. 2021. 3. 17. 리액트를 다루는 기술 _ 12장 프로젝트 들어가면 얼마나 더 힘들까... 12장. immer를 사용하여 더 쉽게 불변성 유지하기 이놈의 불변성이 자꾸만 우리를 괴롭힌다! React의 특징과도 같은 불변성 유지. 우리는 상태 업데이트의 효율을 위해 이를 반드시 지켜줘야 함을 배웠다. 지금까지는 전개 연산자( ... )와 배열의 내장 함수(concat/filter)를 통해 배열 혹은 객체를 간단하게 복사해 새로운 값을 덮어 씌웠다. 그러나 객체의 구조가 엄청나게 깊어지면..? 이를 업데이트하는 게 굉장히 힘들어진다! 만약 이런 어마 무시한 객체를 수정해야 한다고 생각하면... 기존에 있던 값들은 전개 연산자를 이용해 몽땅 복사해줘야만 한다! object 속 somewhere 속 deep 속 array에 5를 추가하고 싶다면 이런 식으로.... 2021. 3. 16. 리액트를 다루는 기술 _ 11장 여기는 어디... 나는 누구... 11장. 컴포넌트 성능 최적화 지난번 열심히 만들었던 Todo List! 지음은 사용하는데 전혀 불편함이 없지만... 만약 추가할 데이터가 무수히 많아지면? 체감할 수 있을 정도로 지연이 발생하고 만다. 이를 방지하기 위해 컴포넌트 성능 최적화에 대해 알아볼 예정. 11-1) 많은 데이터 렌더링 하기 랙을 경험할 수 있을 정도로 많은 데이터를 렌더링해 보자! App.js 기존 App 컴포넌트에 createBulkTodos 함수를 추가! 요 녀석의 return값이 usesState의 초깃값에 해당되게 된다! (만약 useState(createBulkTodos())라고 적으면? App이 렌더링 될 때마다 createBulkTodos가 호출되고 만다!) 엄청난 스크롤의 향연... 2021. 3. 16. 리액트를 다루는 기술 _ 10장 - 2 2021.03.14 - [Frontend/React] - 리액트를 다루는 기술 _ 10장 리액트를 다루는 기술 _ 10장 어찌저찌 10장까지 도착! 10장. 일정 관리 웹 애플리케이션 만들기 지난번 JS 만으로 만들었던 To-Do App! 이번에는 React로 도전해보자. 10-1) 프로젝트 준비하기 새로운 앱을 만들어주자! 우리의 친구 23life.tistory.com 이어지는 글! 10-3) 기능 구현하기 1. App에서 todos 상태 사용하기 나중에 추가할 일정 항목들은 모두 App 컴포넌트에서 관리! App.js 우선 todos라는 상태를 정의(useState 사용)하고, 이를 TodoLiust의 props로 전달해줬다! 이때 todos 배열 속 객체에는 각 항목의 고유 id, 내용, 완료 여부.. 2021. 3. 16. 리액트를 다루는 기술 _ 10장 어찌저찌 10장까지 도착! 10장. 일정 관리 웹 애플리케이션 만들기 지난번 JS 만으로 만들었던 To-Do App! 이번에는 React로 도전해보자. 10-1) 프로젝트 준비하기 새로운 앱을 만들어주자! 우리의 친구 Sass도 설치! index.css 프로젝트의 글로벌 스타일 파일이 들어 있는 index.css를 수정! 배경을 회색으로 변경해주자. 10-2) UI 구성하기 총 4개의 컴포넌트를 만들 예정! 1. TodoTemplate : 일정 관리 부분을 보여주는 컴포넌트. 2. TodoInsert ; 새로운 항목 입력하고 추가하는 컴포넌트. 3. TodoLisItem : 각 할 일 항목에 대한 정보 보여주는 컴포넌트. 4. TodoList : 여러 개의 할 일을 보여주는 컴포넌트. 이들을 src/co.. 2021. 3. 14. 이전 1 2 3 4 5 다음 728x90 반응형
