Grace's Tech Blog

+ Redux에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞선 27. Redux - Redux의 작동방식2. React-Redux를 통해 상태 사용하기 을 통해 1. Presentational 컴포넌트, Container 컴포넌트 로 구분하고 2. Container 컴포넌트의 Props에 Connect( ) 함수를 사용하여 State값을 연결시켜주고 나면, 해당 컴포넌트는 Store로부터 State를 사용할 수 있게 되는 것 까지 정리해보았다. 이제 Store로부터 State를 사용할 수 있도록 Props에 받아오는 것까지는 했으니, State를 변경하고,그 변경된 것이 화면 UI에 나타나는 것을 할 차례이다. 다시말해 "리듀..

지금까지 1. State와 Store의 역할을 알아보고 2. Action, Reducer을 정의하여서 스토어에 해당 상태를 저장할 수 잇도록 리듀서와 스토어를 연결하는것 까지 알아보았다. 여기서는 Redux의 Store에 있는 State를 React를 통해 사용하는 것에 대해 배운 것을 정리해보도록 하겠다. https://ko.redux.js.org/basics/usage-with-react/ React와 함께 사용하기 | Redux 기초 강좌 > React와 함께 사용하기: How to use Redux with React components ko.redux.js.org 1. Redux를 도입한 React component의 한계와 Presentational 컴포넌트와 Container 컴포넌트 분리 ..

+ Redux에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞서서 Redux에서 사용하는 Action, Store 그리고 Reducer의 의미와 특징을 살펴보았다. 여기서는 Redux을 배우고, 활용할 때 등장하는 State, Store, reducer,action등의 역할과 서로 어떻게 연관되어 작동하게 되는지를 정리해보고자 한다. 1. State(상태) React를 배울 때 처음 접한 State는 컴포넌트 내부적을 사용하는 데이터의 집합이다. 유튜브라면, 상태는 재생되고 있는 비디오 정보, 화면 비디오 리스트에 출력되는 비디오들의 정보, 다크모드 여부, 등이 될 수 있다. 앞선 유튜브 클론 코딩을 통해 state는 어떤 ev..

+ Redux에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) Intro & Redux란 앞서서 22-24번 포스팅을 통해 React를 배웠고, React Sprint -유튜브 클론 코딩을 진행했다. 아래는 미로 에서 제가 짠 유튜브 클론 코딩의 컴포넌트 구성을 나타낸 것이다. (컴포넌트 시각화를 트리 구조로 짜는 것이 편하다는 것을 몰랐다는 것을 감안하더라도 너무 복잡..) 실제로 유튜브 클론 코딩을 하면서 가장 많은 시간을 쓰고 고민하고 힘들었던 점이 'state 끌어올리기'였다. 한 예를 들면, App에 있는 state인 currentVideo와 함수인 handleVideoListEntryTitleClick을 props형태로 ..