0youn 0youn

리엑트 작동 원리에 대해 대략적으로 알고는 있었지만 리엑트가 어떻게 작동되나요 라고 물어본다면 답을 하기는 어려웠을 것 같다. 그래서 오늘은 리엑트의 작동원리에 대해 알아보도록 하겠다. 오늘은 3가지 키워드로 정리를 해보려 한다. Virtual DOM, 리엑트의 이벤트 처리, JSX 이 3개를 정리하려 하는데 가장 중요한 Virtual DOM부터 정리해보자 한다. Virtual DOM이란 DOM과 비슷한 React의 객체 트리다. 개발자는 DOM을 직접 제어하지 않고 Virtual DOM을 제어하게 되며, 이를 통해 DOM에 반영하는 작업을 한다. Virtual DOM은 ReactDOM.render()함수를 호출하면 Virtual DOM을 만들기 시작하게 되는데 루트(최상단 부모 컴포넌트) compone..

이전에 express 공부를 하면서 미들웨어에 대해 정리를 했었는데 리덕스에서도 미들웨어가 있다고 해서 정리해 보려 한다. 1. 미들웨어란? express에서 미들웨어는 서버가 요청을 받으면 해당 요청에 대한 응답 이전에 원하는 추가 작업을 미들 웨어를 통해 진행할 수 있었는데 리덕스에서 미들웨어는 이와 마찬가지로 리듀서가 호출되기 전에 미들웨어를 실행함으로써 추가 동작을 미리 할 수 있도록 해준다. 2. 사용 방법 - 미들 웨어를 사용하기 위해서는 미들 웨어를 만들고 해당 미들웨어를 스토어에 적용해야 한다. 스토어에 미들웨어를 추가하기 위해서는 applyMiddleware 함수를 사용하여 가능하다. import React from 'react'; import ReactDOM from 'react-dom..

리엑트에서 hook을 공부하다가 useContext라는 훅이 있어서 찾아보니 context라는 기능(?)이 있어 공부해봤다. 리엑트에서 state 끌어올리기를 진행하다 보면 사용하지 않는 props들이 전달되어야 하는 일들이 종종 벌어진다. 이를 해결하기 위해 사용하는 것이 context 이며 오늘은 context와 훅인 useContext에 대해 정리해보려 한다. 1. context란? context는 단계마다 일일이 props를 넘겨주지 않아도 하위 컴포넌트라면 컴포넌트 트리 전체에 데이터를 제공할 수 있도록 해준다. 즉 선언한 위치에서 해당 값을 context로 지정하면 전역적이라고 볼 수 있는 데이터를 공유하게 된다. 예를 들어 웹 페이지에서 흑색 모드와 백색 모드로 화면의 배경 색을 정해주는 기..

리엑트는 컴포넌트 단위로 이뤄진 앱을 제작하는 라이브러리로 각각의 컴포넌트들을 재사용 가능하게 제작하여 작업의 효율을 극대화 하는 장점을 가지고 있다. 이를 활용하기 위해 리액트는 프런트엔드 개발을 위해 설계 우선 접근법을 권장한다. UI/UX 팀은 개발자들이 구현할 수 있는 목업을 만들 것이며(mocking), 개발자들은 이를 이용해 UI를 컴포넌트 계층으로 세분화 할 수 있다. 오늘은 이를 개발론적인 방법으로 접근하는 atomic folder design에 대해 이론적인 부분만 정리해보자 한다. 1. atomic folder design 이란? 이름 그대로 원자들로 이뤄진 폴더 디자인 패턴을 말하는데 이를 가장 쉽게 설명한 그림은 아래와 같다 위의 이미지를 보면 원자가 모여 분자를 이루고 분자가 모여..