useEffect랑 useLayoutEffect 둘 중 useLayoutEffect 먼저 화면에 랜더링 된다. useLayoutEffect?? useEffect와 비슷한 역할을 한다. useEffect는 보통 화면이 랜더링 된 후 실행이 되지만, useLayoutEffect는 화면의 리사이징, 즉 레이아웃의 변환을 감지하는 Effect이다. 정리하자면 useEffect -> 화면이 완전히 바뀌고 난 후 발생 useLayoutEffect -> 화면이 바뀌기 전 발생

Javascript를 사용할 때, 특정 DOM을 선택해야 하는 상황에서 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택해야 한다. 리액트를 사용하는 프로젝트에서도 마찬가지로 DOM을 직접 선택해야 하는 상황이 발생할 수 있다. 예를 들어 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나, 설정하든지, 또는 포커스를 설정해줘야 한다던지 등, 생각보다 다양한 상황이 있다. 그리고 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용할 때도 특정 DOM에다가 적용해야 한다. 이럴 때, 리액트에서는 ref라는 것을 사용한다. ..

useEffect??? componentDidMount와 componentDidUpdate, componentWillUnmount 클래스 컴포넌트에서 제공하는 Lifecycle API를 useEffect를 사용하여 대신할 수 있다!! render가 발생할 때마다 (componentDidMount ⇒ 초기, componentDidUpdate ⇒ 매번) effect가 실행된다. 여기서 두 번째 파라미터인 inputs를 통해 특정 상태가 update 되었을 때만 effect가 실행되게 설정할 수 있다. 만약 useEffect의 inputs에 빈 배열을 넘겨주면 최초(componentsDidMount)에만 실행된다. componentWillUnmount를 실행하기 위해선 return을 사용하여 기능 수행이 가능..

특정 DOM 요소에 작업을 해야 할 경우 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다. 이렇게 HTML에서 id를 사용하여 특정 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법도 있다. 이것이 바로 ref(reference의 줄임말)이다. 물론 리액트 컴포넌트 안에서 id를 사용할 수 있다. JSX안에 id를 달면 되기 때문이다. 하지만 여러 컴포넌트를 사용할 때 id를 사용하게 되면 HTML의 id는 유일(unique) 해야 하는데, 중복된 id를 사용하는 컴포넌트가 여러 개 생길 우려가 있다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이러한 문제에 걱정이..

useState?? useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 이벤트 핸들러나 다른 곳에서 호출할 수 있다. 아니!! 근데 이런 걸 왜 쓰는 겨?? state는 리액트에서 동적인 부분을 담당한다!! 컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션(상호작용)에 따라 바뀌어야 하는데 우리가 일반적으로 사용하는 let, const 변수는 정적인 변수여서 화면에 리렌더링이 되지 않는다. 그런 상황에서 state없이 개발을 진행한다면.... 어라? 전부... 정적?? 에라이 ! 와장창!!! 할 수 있기 때문에 동적으로 값이 바뀌는 state를 사용한다. import React, { useState } from 'react'; function Example() { //..

Hook?? Hook은 React 16.8 버전에서 새로 추가되었다. Hook 은 클래스 컴포넌트를 작성하지 않아도 상태 값과 여러 React의 기능을 사용할 수 있다. 즉, 함수형 컴포넌트에서 React state와 생명주기(lifecycle features)를 연동할 수 있게 해주는 함수 Hook의 특징?? 선택적 사용 : 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다. 하지만 Hook이 필요 없는 상황이라면 굳이 Hook을 사용할 필요는 없다! 100% 이전 버전과의 호환성 : Hook은 호환성을 깨뜨리는 변화가 없다! 현재 사용 가능 : Hook은 리액트 v16.8.0에서 사용할 수 있다.

모든 리액트 컴포넌트는 라이프사이클이 존재한다. 프로젝트를 진행하다 보면 컴포넌트를 처음으로 렌더링 할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지할 필요가 있을 수 있다. 바로바로 이때! 라이프사이클 메서드를 사용한다. 이러한 라이프사이클 메서드는 클래스형 메서드에서만 사용이 가능하고 함수형은 Hook으로 작업! 라이프사이클 메서드의 종류는 총 아홉 가지로, Will 접두사가 붙은 메서드는 어떤 작업을 하기 전, Did 접두사는 어떤 작업을 작업한 후 실행되는 메서드이다!! 라이프 사이클은 또 3가지, 마운트, 업데이트, 언마운트 카테고리로 나눈다. 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)..

history history라는 기능이 Route에 많이 보이는데, 도당체 어떤 거냥?? history는 자바스크립트 다양한 환경에서 history 세션을 관리해준다. https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md 깃허브 주소에서 보자면 history objects typically have the following properties and methods: length - (number) The number of entries in the history stack action - (string) The current action (PUSH, REPLACE, or POP) ..