React 하면 많은 것이 떠오르겠지만 컴포넌트, 재사용성 등의 키워드가 가장 먼저 떠오른다. 리액트에서는 props를 통해서 컴포넌트에 새로운 엘리먼트나 컴포넌트를 추가하는 것이 가능하다. 이것을 컴포넌트 합성이라고 부른다. 그러면 내부의 디자인이 다른 UI에서도 쉽게 재사용할 수 있는 컴포넌트를 만들 수 있다. 다음과 같은 디자인이 있다고 생각해보자 노란색 박스 영역이 조금 형식이 다른데, 위에는 보라색 버튼과, 녹색 내용이 있으며, 아래는 버튼은 없고, 갈색 내용이 있다. 이것을 위해서 모든 내용을 매개변수로 받기에는 노란색 박스가 관리해야할 매개변수가 너무 많아진다. ( 위 레이아웃까지야 괜찮다고 하더라도 더 큰 형식이면?! ) 이걸 이제 React로 한번 만들어보자 interface Props ..

지금까지 리액트 환경을 구성하는 부분은 많이 작성했기 때문에 리액트 환경 구성을 모두 다 했다는 조건으로 글을 작성합니다. Canvas 만들기 //GlobalStyle.tsx import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` body { margin: 0; } `; export default GlobalStyle; 우선 거슬리는 body의 margin을 styled-components의 createGlobalStyle을 사용해서 없애준다. import GlobalStyle from './GlobalStyle'; import Home from './pages/Home'; interface ..

써야지 생각만 계속 하다가 이번에 작성하게 되었다. Eslint ? 자바스크립트와 타입스크립트의 코딩 스타일 도구이다. 미리 정해둔 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해주는 좋은 친구이다. Prettier ? 코드의 스타일만 정리해준다. 미리 규칙을 정하면 자동으로 규칙에 맞게 코드를 정리해주는 도구이다. 미리 정해둔 규칙에 따라 정렬해주기 때문에 가독성을 높혀주고 코드의 스타일을 통일시켜준다. 설치 VScode의 extensions에서 eslint와 prettier를 설치해준다. npm install --save-dev eslint prettier typescript 설정을 위해서 eslint와 prettier를 설치하고, 타입스크립트 환경이므로 typescript도 설치해준다. ..

들어가며. 이 글은 최대한 Redux의 공식 홈페이지를 토대로 Redux를 정리 및 이해하려고 한다. 동기. 자바스크립트 싱글 페이지 애플리케이션이 갖추어할 요건이 점점 더 복잡해지고있는 만큼, 어느 때보다도 많은 상태를 자바스크립트 코드로 관리할 필요가 생겨났습니다 상태에는 서버 응답, 캐시 데이터, 지역적으로 생성해서 사용하고 있지만 아직 서버에 저장되지 않은 데이터를 의미 실제로 프론트엔드를 개발하다보면 생각보다 많은 곳에서 State를 사용해야한다. 예를들어, 작은 모달창을 화면에 나오게 하기 위해서도 isModal 과 같은 상태를 만들어준다. 항상 변하는 상태를 관리하기란 어렵습니다... 상태를 언제, 왜, 어떻게 업데이트할지 제어할 수 없는 지경에 이르고 맙니다. 그렇다. 부모 컴포넌트에서 자..

Flux? Flux는 페이스북에서 클라이언트 사이드 웹 애플리케이션을 만들때 사용한 애플리케이션 아키텍쳐이다. 단방향 데이터 흐름을 활용해서 뷰 컴포넌트를 구성하는 리액트를 보충해주는 역할을 합니다. 구조와 데이터 흐름 Flux에서의 데이터는 앞에서 말한 것처럼 단방향으로 흐른다. view는 사용자의 상호작용에 따라 응답을 위해서 새로운 Action을 만들어서 다시 전파를 하게 된다. 이렇게보면 단방향(?)이라는 부분이 이해가 안될 수 있지만, 결국 Action은 대부분의 상황에서는 View의 사용자 상호작용으로 Action이 발생하게 된다. 모든 Action은 Dispatcher에게 가게 되는데, Dispatcher는 Store에 적용하기 위한 콜백을 실행한 다음 결과를 Store에 전달한다. Stor..

State and Lifecycle 올것이 왔다....! State 올바르게 사용하기 React에서는 State를 직접 수정하면 안된다. setState 방식을 사용하지 않고 state를 직접 수정한다면 컴포넌트를 다시 렌더링하지 않는다. 띠용! 여기서 우리가 state를 구현할 때 신경 쓸 사항이 하나 생겼다. setState를 사용해야지만 리렌더링을 해주면 된다! State 업데이트는 비동기적일 수 있다. 우리가 사용하는 state는 비동기적으로 업데이트를 할 수 있다. 그러므로 setState로 값을 지정해줄 때 자신의 값에 의존하면 안된다. const [state, setState] = useState(1); const func = () => { setState(state + 1) } 만약 비동기..

리액트의 라운터 사용자가 주소를 입력하면 그것을 감지해서 화면에 올바른 페이지를 제공한다. BrowserRouter와 HashRouter가 존재한다. - BrowaerRouter : 우리가 흔히 알고있는 주소 체계이며, HTML5를 지원하는 브라우저의 주소를 감지 - HashRouter : 주소에 #이 붙어 있으며, 이 해시 주소를 감지한다. 설치 yarn add react-router-dom 가장 많이 사용하는 react-router-dom이다. 사용하기 import { BrowserRouter, Routes, Route } from "react-router-dom"; import Header from "@/components/layout/header"; import Home from "./home";..

Webpack과 Babel을 사용해서 React 환경을 구성하는 작업은 많이 했었다. 하지만 이번에 타입스크립트를 같이 적용하면서 Webpack 5버전의 기능도 사용하면서 다시 환경을 구성해보려고 한다. 기본 세팅 npm i --s core-js react react-dom 바벨 설정을 위한 core-js, 리액트 사용을 위한 react, react-dom 이다. npm i --save-dev @babel-cli @babel/core @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react @babel/preset-typescript 엉청 많다. ㅋㅋ... 우선 마찬가지로 바벨 설정을 위한 패키지들이다. babel/plugin-s..