즐겁게, 코드

기본 설정으로 리액트 프로젝트를 구성했다면 index.js 파일에서 아래 코드를 본 적 있을 것이다. ReactDOM.render(, document.getElementById('root')); 이는 public 폴더에 존재하는 HTML 문서 중 id = "root" 인 요소의 자식으로 App 컴포넌트를 렌더링한다는 의미인데, 가끔은 여러 이유로 부모 컴포넌트를 벗어난 곳에 자식 컴포넌트를 배치해야 할 때가 있다. 예를 들면 모바일 화면에서 드로어(측면 메뉴)를 만들 때 드로어는 화면 위를 덮으므로 DOM 상에서도 최상단에 위치하는 것이 자연스럽다. 그러나 위의 ReactDOM.render() 함수로 인해 드로어는 언제나 root의 자식 요소로 배치되게 되는데, 포탈(portal)을 활용하면 부모 요소 ..

useEffect 훅은 컴포넌트의 부수동작(effect) 을 담당하는 훅으로 기본 훅 중에서도 가장 중요한 훅이라 할 수 있다. (부수동작이란 컴포넌트가 처음 마운트될때 / 컴포넌트가 업데이트될때 / 컴포넌트가 언마운트될때 일어나는 모든 동작을 의미한다.) [useEffect 훅의 기본 형태] import React, {useEffect} from 'react' useEffect( (이펙트 함수) return { (클린업 함수) } }, [의존값]); // 이펙트 함수 호출시점 : 컴포넌트가 처음 마운트될 때, 의존값으로 주어진 값이 변경될 때 // 클린업 함수 호출시점 : 이펙트 함수가 호출되기 전, 컴포넌트가 언마운트될때 각각 클린업이 호출된다. // 의존값 배열이 비어 있으면 최초 마운트 시에만 이..

리액트로 컴포넌트를 만들때 함수 컴포넌트를 사용하는 것이 대세가 된 지금 함수 컴포넌트에서 클래스 컴포넌트의 동작을 구현하는 훅(Hook)에 대한 이해는 필수적이다. 오늘은 리액트 훅의 기본적인 특징과 클래스 컴포넌트의 상태를 구현하는 useState 훅에 대해 알아보자. import React, { useState } from "react"; function App() { const [count, setCount] = useState(0); function decrementCount() { // count 가 들어간 부분을 재렌더링함. setCount((prevCnt) => prevCnt - 1); } function incrementCount() { // count 가 들어간 부분을 재렌더링함. se..