Note

useEffect Hook의 useEffect는 클래스형 컴포넌트의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다. useEffect는 기본적으로 매 렌더링 이후에 실행됩니다. 기본 예시는 다음과 같습니다. useEffect 예시 import React, {useState, useEffect} from "react"; const HookUseEffect = (props) => { const [description, setDescription] = useState(''); useEffect(() => { // do effects setDescription('This is useEffe..

useState Hook에서는 컴포넌트 안에서 상태를 관리할 수 있도록 하기 위해 useState 라는 API를 제공합니다. useState는 상태 값과 상태를 업데이트할 수 있는 함수 쌍을 반환합니다. 예시 코드는 다음과 같습니다. useState 예시 import React, {useState} from "react" const HookUseState = (props) => { // count 라는 상태를 만들고, 0을 초기값으로 사용합니다. const [count, setCount] = useState(0); const handleButtonClick = () => { // 카운트 값을 1 증가하여 상태를 업데이트합니다. setCount(count + 1) }; return ( 클릭 수: {coun..

소개 React의 Hook은 클래스형 컴포넌트에서의 복잡성(this의 scope)과 라이프사이클 메소드의 복잡성 등 클래스형 컴포넌트의 여러 문제점을 보완하기 위해 나왔습니다. React 공식문서에 따르면 Hook은 다음과 같은 특징을 가지고 있습니다. 기존의 코드를 다시 작성할 필요 없이 일부 컴포넌트 안에서 Hook을 사용할 수 있습니다. 호환성을 깨뜨리는 변화가 없습니다. 기존의 React 컨셉을 대체하지 않고 좀 더 직관적인 API를 제공합니다. 공식문서에 따르면 React에서 클래스형 컴포넌트를 제거할 계획이 없고 계속 지원할 예정이니 Hook이 당장 필요하지 않다면 Hook을 사용할 필요는 없다고 합니다. 또한, 기존의 코드를 Hook을 사용해서 리팩토링하는 것 보다는 Hook이 필요하다면 점..

1. 개요 리액트에서는 DOM을 제어할 수 있는 ref라는 것을 제공합니다. ref는 DOM을 제어하는 것으로 반드시 DOM을 직접적으로 제어를 해야할 때만 사용할 것을 권장하고 있습니다. 예를 들면 특정 이벤트가 발생했을 때 스크롤을 특정 위치로 옮겨야할 때 ref를 사용합니다. 또는, 리액트용으로 개발되지 않은 라이브러리를 사용해야할 때 ref를 사용하게 됩니다. 2. 사용방법 ref를 사용하는 방법은 두가지가 있습니다. 첫 번째는 콜백 함수를 이용해서 ref를 등록하는 것입니다. import React from "react"; class RefSample extends React.Component { render() { return ( {this.ref = ref}}>ref div ); } } 두 ..

1. 개요 리액트에서 클래스형 컴포넌트를 사용하면 라이프사이클 메소드를 사용할 수 있습니다. (함수형 컴포넌트에서는 사용할 수 없습니다.) 라이프사이클 메소드는 컴포넌트가 mount 되거나 update, unmount 될 때 실행됩니다. mount와 unmount는 이름으로 컴포넌트가 등록되거나 해제될 때라는 느낌이 오는데 update는 어떤 경우일까요? 리액트에서 update가 발생하는 경우는 아래와 같습니다. props 값이 변경될 때 state 값이 변경될 때 부모 컴포넌트가 리렌더링될 때 forceUpdate로 강제 업데이트를 트리거할 때 2. Mounting 리액트 컴포넌트는 마운트될 때 위와 같은 순서의 메소드를 실행하게 됩니다. componentWillMount라는 메소드도 있지만 depre..

1. 개요 state는 컴포넌트의 내부에서 컴포넌트의 상태를 저장하는 값입니다. props는 부모에서 전달해서 읽기전용으로 사용하는 변수라면 state는 컴포넌트 내부에서 읽기 뿐만 아니라 수정을 할 수 있습니다. 2. 초기화 컴포넌트에서 state를 초기화 하는 방법은 2가지가 있습니다. 첫 번째는 필드(?)에서 선언하는 방법이고, 두 번째는 생성자(constructor)에서 선언하는 방법입니다. import React from "react"; class StateCheckClassComponent extends React.Component { state = { checked: false }; render() { return ( checkbox ) } } export default StateCheckC..

1. 개요 React의 Props는 Properties를 줄인 용어로 컴포넌트의 속성을 의미합니다. props는 부모 컴포넌트에서 자식 컴포넌트를 선언할 때 지정하고, 자식컴포넌트에서는 props 변수를 사용할 수 있습니다. 부모컴포넌트에서는 자식컴포넌트를 명시할 때 속성을 지정할 수 있는데 이는 값이 될 수도 있고 함수가 될 수도 있습니다. 또한 자식컴포넌트의 자식을 명시해서 전달할 수 있습니다.(자식 컴포넌트에서 사용하지 않으면 의미가 없습니다.) 자식 컴포넌트에서는 부모에서 prop을 전달하지 않았을 때 사용할 기본 속성값을 지정할 수 있고, PropTypes를 통해 props의 타입이나 필수 속성여부를 지정할 수도 있습니다. props의 이름은 일부 미리 정의된 이름(children)을 제외하고 ..

1. 개요 React는 두 가지의 컴퍼넌트 선언방식이 있습니다. 하나는 함수형 컴퍼넌트고, 다른 하나는 클래스형 컴퍼넌트입니다. 2. 컴퍼넌트 2.1. 함수형 컴퍼넌트 함수형 컴퍼넌트는 아래와 같은 형태를 합니다. import React from "react"; const FunctionalComponent = (props) => { const {description} = props; return Functional Component: {description} }; export default FunctionalComponent; 간단한 형태를 하고, 라이프사이클 기능을 사용하지 않아도 될 때 사용하기 좋습니다. Hooks이 생기면서 함수형 컴퍼넌트에서도 state를 사용할 수 있도록 되었습니다. 2.2...