당신은 리액트를 쓰면서 useEffect를 얼마나 사용하는가? useEffect는 React 컴포넌트에서 side effect를 처리하는데 너무나도 중요하게 사용되는 훅이다. useEffect에 대해서 알아보려면 side effect에 대한 이야기부터 차근차근 밟아가야 한다. Side Effect란? 간단하게 한국어로 번역하면 부수효과라는 뜻으로 함수나 표현식의 실행 결과 외에 발생하는 영향을 말한다. 우리가 일반적으로 프로그래밍을 할 때에는 함수나 표현식의 결과값을 반환하는 것을 기대한다. 하지만 예상한 결과 값 외에도 외부 상태를 변경하거나 다른 부작용을 발생시키는 경우가 있다. 이런 외부 상태의 변경이나 부작용을 Side Effect라고 부른다. 보통 비동기적으로 처리되는 효과들을 Side Effe..
리액트, 왜 사용하시나요? 최근 기술 면접을 대비하여 준비를 하다 보니, 문득 내가 왜 React를 쓰고, React Native를 쓰는 거지? 생각이 들었다. 내가 React를 사용하는 이유에 대해 나조차 전혀 모르고 있었기 때문에 내가 왜 리액트를 사용해야 하고, 이 라이브러리를 통해 얻을 수 있는 것이 무엇인지에 대해 알아본다. 결론부터 정의 해 보자면, 우리가 HTML, CSS, Javascript로 쌩 코딩하지 않는 이유는 시대의 변화와 흐름 때문이라고 볼 수 있다. 동적으로 사용자 친화적으로 웹 서비스가 변화 하면서 사용자에게 더 좋은 UI와 UX를 제공하기 위해 리액트를 사용하고 있는 것이다. 리액트란? 리액트 왜 사용하는지 결론을 냈으니, 리액트가 무엇인지 알아보자. 먼저 리액트 공식 D..
Hook은 최근 리액트 16.8부터 새로 도입된 기술로, Class Component에서만 사용 가능했던 state와 lifecycle을 function component에서도 사용 가능 하도록 제작됐다. 단지 Class component를 function component로 옮기는 것에서 끝난 것이 아닌, 컴포넌트의 state에 관련된 로직을 재사용 할 수 있다는 장점이 있고, 컴포넌트간의 통신을 도우는 Context API등 다양한 발전들이 이뤄졌다. React v.17 이후부턴 리액트가 공식적으로 Class component를 사용하는 것이 아닌, Functional Component를 사용하라고 권장했다. 따라서 외부 라이브러리부터 다양한 프로젝트에서도 Functional component와 ho..
React에서 HOC라고 불리는 Higher Order Component의 개념에 대해서 알아보자. 한국 말로는 고착 컴포넌트라고도 불린다. Higher Order Component는 Hook이 나오기 이전 React v.16에선 매우 중요한 개념으로 자리 잡았다. HOC와 비슷한 역할을 하는 Hook의 등장으로 중요도가 예전만큼은 아니게 되었다. HOC란? advanced technique in React forreusingcomponent logic. 컴포넌트 로직을 재 활용 할 수 있는 고급 기술 not part of the React API 리액트 API랑은 전혀 관련이 없다 a pattern that emerges from React’s compositional nature. 리액트의 컴포넌트..
리액트 컴포넌트를 외부 라이브러리 없이 CSS로 스타일링 하는 방법중 가장 대중적인 방법이 Styled Components를 사용하는 방법이다. 이번 포스팅에선 Styled Components를 알아볼까 한다. CSS in JS Styled Components는 CSS in JS의 개념으로 제작된 라이브러리이다. 스타일 정의를 보통 css 파일에다가 하지만 CSS in JS는 Javascript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법을 말하는 것이다. 고전 프론트엔드의 방식은 HTML, CSS, JS를 분리하여 개발하였지만 최근 개발 패러다임은 컴포넌트들을 분리하고, 각 컴포넌트들 안에 HTML, CSS, JS를 모두 때려 박는 방식이 사용되고 있다. Styled Component 또한 이러한 방..
보통 우리가 페이지 이동을 구현 할 때 를 사용하여 만들었을 것이다. 하지만 a 태그를 사용 했을 때 문제가 있다. 는 페이지가 이동 할 때 js와 css 모두 다시 다운로드 한다는 문제점이 있다. React Application은 SPA 방식으로 한 번 다운로드 하고 나선 다운로드 하지 않기 때문에 react-router-dom을 이용하여 Link를 사용해주어야 한다. App.js import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Home from './pages/Home'; import Profile from './pages/Profile'; import About from './pages/About'; import No..
다이나믹 라우팅이란? 여기서 말하는 다이나믹 라우팅이란 다음과 같다. http://localhost:3000/profile - 이런 방식의 라우팅만 커버하고 있지만 http://localhost:3000/profile/1 - 원래 있던 라우팅 되는 path 뒤에 또 다른 값이 붙었을 때 처리하는 방식을 말한다. Dynamic Routing by ID import { BrowserRouter, Route } from "react-router-dom"; import About from "./pages/About"; import Home from "./pages/Home"; import Profile from "./pages/Profile"; function App() { return ( /*새로 추가된 코드..
React가 나오기 전 전통적인 방식은 다음 그림과 같다. url이라고 불리는 단위를 바탕으로 해당 페이지의 html, css, js를 서버에게 url에 해당하는 html을 받아왔다. React로 넘어오면서 url을 받아오는 것이 아니고, 큰 앱 전체를 받아왔다. 각각의 페이지를 요청하는 것이 아닌 전체(Single Page Application)을 받아오는 방식을 사용하기 시작했다. SPA의 라우팅 과정 브라우저에서 최초에 '/'(root) 경로를 요청하면 서버에서 React Web App을 내려준다. 내려 받은 React App에서 '/' 경로에 맞는 컴포넌트를 먼저 보여준다. React App에서 다른 페이지로 이동하는 동작을 수행하게 된다면 새로운 경로의 컴포넌트를 보여준다. React 범주에서 ..
