useLayoutEffect [리액트 공식문서] 방향성은 useEffect와 동일하지만, 모든 DOM요소의 변경 후에 동기적으로 발생한다.(useEffect는 비동기) DOM에서 레이아웃을 읽고 동기적으로 리렌더링하는 경우에 사용해야한다. useLayoutEffect의 내부에 예약된 코드들은 브라우저가 화면을 그리기 이전에 동기적으로 수행된다. [Kent C. Dodds | Remix] 기본 동작은 React가 코드를 실행하기 전에 브라우저가 DOM를 업데이트하도록 하는 것이다. 이것은 코드가 브라우저를 차단하지 않고 사용자가 DOM을 더 빨리 볼수 있도록 한다. 그래서 대부분 useEffect를 사용한다. [stack overflow] useEffect와 어느 정도 비슷하지만 React가 DOM에 업데..
ContextAPI 개요 react는 16.3 버전부터 정식적으로 ContextAPI를 지원하고 있다. 일반적으로 부모와 자식간 props를 전달해 state를 변화시키는 것과는 달리 ContextAPI는 컴포넌트 간 간격이 없다. 즉, 컴포넌트를 건너뛰고 다른 컴포넌트에서 state, function을 사용할 수 있다. 또한 redux의 많은 어려운 개념보다 context api는 Provider, Consumer, createContext 개념만 알면 적용할 수 있다. ContextAPI는 컴포넌트안에서 로그인데이터 웹 내 사용자의 설정파일 테마 언어 등 전역적으로 공유되는 데이터로 사용하면 좋다. Context React에서 props와 state는 부모 컴포넌트와 자식 컴포넌트 또는 한 컴포넌트 ..
useReducer useReducer의 역할 useReducer는 State(상태)를 관리하고 업데이트하는 Hook인 useState를 대체할 수 있는 Hook이다. 다시 말해, useReducer는 useState처럼 State를 관리하고 업데이트 할 수 있는 Hook이다. useReducer는 한 컴포넌트 내에서 State를 업데이트하는 로직 부분을 그 컴포넌트로부터 분리시키는 것을 가능하게 해준다는 것이다. 그렇게 useReducer는 State 업데이트 로직을 분리하여 컴포넌트의 외부에 작성하는 것을 가능하게 함으로써 코드의 최적화를 이루게 해준다. 아래의 두 코드를 비교해보자(State 업데이트 로직이 어디에 위치했는지 큰 구조만 살펴볼 것) useState를 사용한 경우 : 컴포넌트 내부에 ..
공부하면서 얻은 Hooks Tip! Hooks Pattern componentDidMount만 하고싶은 경우 useEffect(() => { // code }, []); 두 번째 인자(배열)의 값이 없어서 componentDidMount의 경우에만 실행된다. 첫 렌더링 때 실행된다고 생각하면 된다. componentDidUpdate만 하고싶은 경우 const mounted = useRef(false); useEffect(()=>{ if(!mounted.current){ mounted.current=true; }else{ // code } },[]) 첫 렌더링 때 실행되는 componentDidMount를 플래그변수로 막고 그 이후(componentDidUpdate)에 실행되는 코드가 실행된다. 클래스와 ..
리액트 아이콘 리액트의 라이브러리로 수 많은 아이콘을 컴포넌트 형식으로 사용 할 수 있다. 터미널에서 npm을 사용해 설치한다. npm install react-icons --save React icon에서 원하는 아이콘을 찾아서 불러 올 수 있다. React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons ..
리액트 환경 프로젝트 Github 배포 리액트 환경에서 생성한 SPA의 state, JSX, , props 같은 문법들은 브라우저가 해석할 수 없어 그대로 배포할 수 없다. 이런 문법들을 CSS JS HTML 문법으로 바꿔주는 작업이 필요하다. 이러한 작업을 컴파일(comfile) 또는 빌드(build) 라고 한다. 웹팩이 이러한 컴파일이나 빌드의 기능을 처리한다. gh-pages 설치 배포하고자 하는 react 앱의 root 에서 터미널을 통해 gh-pages 를 설치해준다. npm i gh-pages 설치가 정상적으로 완료됐다면 package.json 의 dependencies 에 gh-pages 가 생성된다. App()컴포넌트에 프로퍼티 추가 App()에서 BrowserRouter에 basename..
React Router 리액트에서 SPA(Single Page Application)을 제작 하기 위해서는 Router(라우터)라는 라이브러리가 필요하다. 한 개의 페이지에서 라우터를 이용해서 여러 개의 페이지를 만들 수 있는 것이다. 설치 터미널로 npm을 통해서 라우터를 설치한다. npm install react-router-dom 라우터의 기본 사용법 import 로 'react-router-dom' 에서 { BrowserRouter, Routes, Route } 를 불러온다. BrowserRouter > Routes > Route 의 구조로 이루어 진다. Route 에는 path 와 element 속성으로 이루어져 있는데, path 는 페이지 URL의 맨 뒤 경로를 나타내고 element 에는 p..
함수 컴포넌트 함수 컴포넌트란 함수를 기반으로 작성하는 컴포넌트를 말한다. 클래스형 컴포넌트에 비해 훨씬 짧고 직관적인 코드를 짤 수 있고, 함수 프로그래밍을 할 수 있게 해준다. 함수 컴포넌트의 Hook이라는 기능으로 클래스형 컴포넌트의 생명주기함수와 같은 기능을 사용할 수 있다. 리액트 공식 문서에서도 함수 컴포넌트 + Hook 조합을 추천하고 있다. Hooks 리액트의 Hook 은 함수 컴포넌트에서 React state와 라이프사이클 기능을 “연동(hook into)“할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않고 class 없이 React를 사용할 수 있게 해준다. Hook의 개요 리액트 훅을 도입하게 된 목적은 여러가지가 있다. 컴포넌트에서 상태관련로직을 사용할 때 H..
Life Cycle 모든 리액트 컴포넌트에는 생명주기(Life Cycle)가 존재한다. 컴포넌트는 ‘생성(mounting) -> 업데이트(updating) -> 제거(unmounting)’ 의 생명주기를 갖는다. 생명주기에 맞게 어떤 작업을 처리해야 하는지에 따라 불필요한 업데이트를 방지할 수 있다. 리액트의 클래스형 컴포넌트는 라이프사이클을 활용하고, 함수형 컴포넌트는 Hook을 사용한다. Lift Cycle(생명주기) Mount(생성) 컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출된다. constructor() : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메소드 this.props this.state 에 접근할 수 있으며 리액트 요소를 반환한다. setState 를 사용..
React 설치 및 프로젝트 생성 node.js 설치 안정적인 왼쪽의 LTS버전을 설치한다. React설치를 위한 npm 은 node.js 설치 시 함께 설치된다. 프로젝트용 폴더 생성 프로젝트용 폴더를 생성하고, 우클릭을 통해 터미널로 폴더를 연다. 터미널에서 npx create-react-app 프로젝트명 을 입력하고 Enter를 치면 폴더 안에 프로젝트명으로 된 폴더가 생성된다. (mac 기준 오류 발생 시 sudo npx create-react-app 프로젝트명 입력 후 Enter를 치고 비밀번호를 입력하면 된다.) npx create-react-app 프로젝트명 폴더별 역할 코드 에디터로 생성된 프로젝트 폴더를 열면 아래 사진과 같이 폴더와 파일들이 생성된다. node_modules 프로젝트 구..
