코딩 헬스장

함수형 컴포넌트를 실무에 적용하여 개발을 진행 중인데, 로컬 변수를 사용에 있어 문제가 발생했습니다. 기존 클래스 형의 함수에서 사용했던 것처럼 let, const 등의 키워드로 변수를 선언 할당하여 사용했는데, 처음 한 번은 정상이나, 한번 이상 렌더링 되면 값이 초기화되어 계산 로직에서 잘못된 값이 나왔습니다. 원인을 파악해보고자 간단한 예시를 만들었습니다. maxMn, minMn의 두 로컬 변수를 만들고 초기값을 할당한 후, 계산식을 탈 때 두 값을 찍어주도록 해봤습니다. 1. 내 코드의 문제점 useEffect를 통해 변수에 값을 할당 후 계산식에서 처음 사용 시에는 정상이나 두 번째(렌더링이 일어난 후)부터는 0으로 초기화되는 현상을 볼 수 있습니다. 원인을 파악하기 위해 함수 컴포넌트 최상단에..

Hook은 리엑트 v16.8에 추가된 기능이며, 함수형 컴포넌트에서 state와 생명주기와 같은 여러 기능을 제공하는 라이브러리 입니다. 최상위(at the Top Level)에서만 hook을 호출해야합니다. 반복문, 조건문 또는 중첩된 함수 내에서 hook을 호출하면 안됩니다. early return(함수 또는 반복문 등에서 끝에서 return 되기 전 if문 안에서 일찍 return 하는 것)전에 항상 React함수의 최상위에 hook을 호출해야합니다. 오직 React 함수 내에서 hook을 호출해야 합니다. import React, { useState } from "react" function HookTest(props) { if (props.name == 'User') { const [name, ..