![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/LMY9N/btq66VE7ogr/KMXbr8VRVDs7jIkq5Qwm5k/img.png)
Redux-Saga redux-saga는 redux의 비동기 작업을 구현할 수 있도록 도와주는 library이다. redux 공식문서에서는 다음과 같이 소개하고 있다. redux-saga is a library that aims to make application side effects easier to manage, more efficient to execute, easy to test, better at handling failures. redux-saga는 side effect(실행중인 현재 함수의 범위를 벗어난 것에 영향을 미치는 모든 것, server와의 통신과 같은 비동기 작업, 인증 서비스 호출, 브라우저 캐시 액세스 등의 작업)를 보다 쉽게 관리/실행/테스트를 할 수 있도록 도와주는 라이브..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/mCIaS/btq6ru97VqB/yeAcSD2gc9FXv1SESuW0XK/img.png)
Router란? 라우터는 컴퓨터 네트워크에서 데이터를 송수신하는 장치이다. 패킷의 위치를 추출하여 그 위치에 대한 최적의 경로(가장 빠르게 동신이 가능한 경로)를 지정하며 이 경로를 따라 데이터 패킷을 다음 장치로 전향시키는 네트워크 중계 장치이다. 사실 Router는 여기서 기술할 react router와는 관련이 없다. 하지만 "경로를 설정한다"라는 기능은 동일하다. React router React router는 설정한 URL에 따라 콘텐츠를 전송해준다. react-router는 서드파티 라이브러리로써, 컴포넌트를 routing하기위해 가장 많이 사용하는 라이브러리이다. router를 직접 구현하는 것은 시간이 걸리는 작업이다. react router 라이브러리를 사용하면 이러한 작업을 간단하게 해..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/ABGOD/btq1pz85zSk/LlaBFsxeSx0Mz59WvsGcqK/img.png)
리덕스 리덕스는 상태(State)를 관리 라이브러리이다. 상태(State) 란? 컴포넌트 내 mutable 데이터 저장소이다. mutable하다는 의미는 상태값을 변경할 수 있다는 것이고 뷰(render)에서 상태를 이용하고, 상태가 변경되면 뷰가 리랜더링(Rerendering)되는 성격을 가지고 있다. 화면에서 사용자의 Input값을 감지하는 상황을 예를 들어보자 위의 사진은 useState hook을 이용하여 입력받을 데이터데 대한 초기화를 해놓은 형태이다. 이 사진은 input박스의 데이터 변화를 감지하여 state에 데이터를 변경해주는 코드이다. 이런 형태로 state를 관리할 수 있다. 이러한 데이터들을 하위컴포넌트 또는 상위컴포넌트로 전달할 경우, 컴포넌트 트리가 깊어지면 상태관리가 복잡해질 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/baXL5L/btq47ThnkSV/5OUODMFal4phCJpcEZo1G0/img.png)
history.push와 Redirect차이점이 궁금해진 이유 개인 프로젝트에 HOC를 적용하며 props.history와 Redirect의 차이점이 무언지 궁금해졌다. 현재 로그인 유무에 따라 접근을 제한하기 위한 HOC를 만들고 있다. 예를 들어 로그인 페이지는 로그인 전은 접근이 가능하도록 하고 로그인 후는 로그인 페이지에 접근하려 할 경우 기본 페이지로 다시 돌아가게 작동을 하려하는 상황이다. 1. Redirect를 사용한 경우 function Authentication(props : any){ useEffect(() => { if(option){ (async () => { const request = await axios.get('/user') .then((response : AxiosRespo..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/tbIN0/btq4jOvs6x4/qNKt4ftVkuVkuph7IhgaJK/img.png)
브라우저는 가장 많이 사용하는 SW프로그램일 것이다. 브라우저의 종류로는 IE, Chrome, Safari, Firefox, Opera, Edge 등이 있다. 브라우저의 기능 우리는 브라우를 통해 다양한 것을 할수있다. 영화/드라마와 같은 영상시청, 쇼핑, 게임, 채팅 등등 나열하자면 끝이 없다. 이것을 가능하게 하는 것을 이해하기 위해 브라우저와, DOM은 무엇이고 Virtual DOM은 무엇인지에 대한 내용을 정리하고자 한다. 브라우저의 구조 DOM과 Virtual DOM을 이해하기 전 브라우저의 구조와 렌더링방식의 이해가 필요하다. 브라우저는 HTML파일과 CSS명세에 따라 HTML 파일을 해석하여 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정..
React는 class로 컴포넌트를 생성할 수 있고, function으로 컴포넌트를 생성할 수 있다. class컴포넌트와 함수 컴포넌트의 차이는 Lifecycle method를 사용할 수 있냐 없냐가 있다. React에서 함수 컴포넌트를 사용할 때 Lifecycle 메소드를 사용할 수 없었던 단점이 있었다. useEffect hook이 나오기 전까지는,,, useEffect가 나오고 나서 함수 컴포넌트에서 Lifecycle method의 기능을 비슷하게 구현할 수 있게 되었다. React의 생명주기는 크게 화면이 생성되는 Mounting, 화면이 업데이트되는 Updating, 화면이 사라지는 Unmounting가지로 나누어진다. Lifecycle Method에 대한 정리 : kmj24.tistory.co..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cA8W28/btq3GCWH1g4/MqK6KgrjLoRdgMY5PIliIK/img.png)
데이터 바인딩 두 데이터 또는 정보의 소스를 모두 일치시키는 기법이다. Web Application에서 html 정보를 담고있는 템플릿과 컴포넌트가 가지고 있는 동적인 데이터를 일치시켜야 한다. 이것을 가능하게 해주는 것이 데이터 바인딩이다. 데이터 바인딩은 양방향 바인딩과 단방향 바인딩이 있다. 간단하게 양방향 바인딩은 데이터와 화면 사이의 데이터가 지속적으로 일치하도록 하는것이고, 단방향 바인딩은 데이터가 한쪽으로만 바인딩 되는것이다. 일단 무슨 말인지 감이 오지 않는다. 예시를 들어보자. - 양방향 바인딩의 경우, 만약 html의 input박스에 데이터를 입력할 경우를 생각해보자. 사용자는 input박스에 무언가를 입력하여 데이터를 변경할 수 있다. 대표적으로 AngularJS가 양방향 바인딩을 사..
JSX는 React.createElement(component, props, ...children)함수에 대한 문법적 설탕을 제공할 뿐이다. Click Me 위의 코드는 아래와 같이 컴파일 된다. React.createElement( MyButton, {color: 'blue', shadowSize: 2}, 'Click Me' ) JSX태그의 첫 부분은 React element의 타입을 결정한다. 대문자로 시작하는 JSX태그는 React컴포넌트를 지정한다. JSX는 React.createElement를 호출하는 코드로 컴파일 되기 때문에 React 라이브러리 역시 JSX 코드와 같은 스코프 내에 존재해야 된다. JSX타입을 위한 점 표기법 JSX 내에서도 점 표기법을 사용하여 React컴포넌트를 참조할 ..