기존에 Vue로 작성했던 프로젝트를 비슷하게 만들어보기 위해 쉬워보이는 Navigation Header부터 제작했다. 로고 정의 로고는 나중에 Footer에서도 사용하는 등 재활용의 가능성이 있어 Styled Component로 제작하였다. scss 문법을 지원하므로 위와 같이 작성해주었다. Styled Component는 기본적으로 존재하는 태그나 사용자 정의 태그를 새롭게 정의하여 사용하는 방식이다. npm i styled-components import styled from 'styled-components' const 새로운태그명1 = styled.기본적인태그명` style 요소 ` const 새로운태그명2 = styled(사용자정의태그명)` style 요소 ` 그리고 새로운 태그명을 이용해 HT..

인터넷 강의로 배울 때는 React-Router-Dom의 버전이 v5였는데, 내가 현재 실습을 할 때는 v6가 릴리즈 되었다. 따라서 강의의 내용을 그대로 따라하다가 오류에 직면했다. 참고 블로그) react-router-dom v6 업데이트 후 달라진 점 (ft. Prompt 창 띄우는 법) :: 경아의 개발 블로그 (tistory.com) react-router-dom v6 업데이트 후 달라진 점 (ft. Prompt 창 띄우는 법) 불과 몇 달전만 해도 문제없이 잘 쓰고 있었던 react-router-dom 리액트 공부를 다시 시작하면서 router 파트를 복습삼아 진행했는데 분명 그대로! 평소에 썼던거처럼 작성했는데 에러가 뜨는거다! 보 kyung-a.tistory.com React Router ..

Component간 통신하기 기본적으로 Component 간의 통신 방법은 props이다. 그렇기때문에 여러 층의 계층 구조를 가지는 컴포넌트들 간의 통신은 props를 여러번 거쳐야 하는 불편함이 있다. 상위 컴포넌트에서 하위컴포넌트에 state 내려주기 쉽게 설명하면, state의 처리는 상위 컴포넌트에서 끝내고 처리가 끝난 결과물을 props로 넘겨주면 된다. 하위 컴포넌트에서 상위 컴포넌트의 state 수정하기 이 때는 처리가 다 끝난 state를 내려주는 것이 아니라 setState 함수를 전달해준다. Context 위와 같은 불편함을 없애기 위해 도입된 기술이다. Vue의 Store와 유사하다. Context – React (reactjs.org) Context – React A JavaScr..

Hooks 리액트 버전 16.8부터 추가된 새로운 요소. 클래스 컴포넌트에서만 사용할 수 있었던 state와 lifecycle을 함수 컴포넌트에서도 사용할 수 있게 해주는 기능. 컴포넌트의 state와 관련된 로직을 재사용할 수 있다는 점에서 굉장히 큰 의의를 가진다. Hook의 개요 – React (reactjs.org) Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org Basic Hooks Basic Hooks에는 useState, useEffect, useContext가 있다. 등장 배경 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다. 컨테이너 방식(props를 이용한 로직 재사용) 말고, 상..

HOC (Higher Order Component) 고차 컴포넌트 – React (reactjs.org) 고차 컴포넌트 – React A JavaScript library for building user interfaces ko.reactjs.org 컴포넌트를 가공하여 새로운 컴포넌트로 내보내는 React 패턴. (API가 아님) const EnhancedComponent = higherOrderComponent(WrappedComponent); 즉, 를 인자로 받아 를 리턴하는 함수이다. 최근에는 비슷한 역할을 하는 Hook이 출시됐다. HOC 종류 Connect | React Redux (react-redux.js.org) Connect | React Redux API > connect: a High..

Style Loaders 각 loader는 작성한 파일들의 문법을 해석하고 적용시키는 역할이다. webpack은 babel-loader, style-loader, css-loader 등의 여러가지 loader를 사용한다. 각 Loader 살펴보기 CRA로 만들어진 프로젝트를 eject하게 되면 webpack 기반의 프로젝트로 재구성되어 각 loader 들이 수면위로 나온다. npx create-react-app style-loaders-example cd style-loaders-example npm run eject /config/webpack.config.js 위와 같이 각 확장자에 대해 연결되는 Loader들이 설정돼있다. CSS, SASS css파일을 적용시키려면 js에서 다음의 문구를 추가하면 ..