코딩 헬스장

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

현재 실무에서 Class Component 클래스 컴포넌트로만 개발을 진행하고 있기 때문에, Functional Component 함수형 컴포넌트는 접해 본 적이 없어, 공부해보고자 합니다. 1. 함수형 컴포넌트? 함수형 컴포넌트는 JS 함수로 정의된 리엑트 컴포넌트 입니다. state, lifeCycle 관련 기능이 사용 불가능 하나, 주로 Hook를 통해 해결합니다. 클래스 형보다 메모리 자원을 덜 사용하며 컴포넌트 선언이 편하다는 장점이 있습니다. [ 클래스 컴포넌트와 차이점 ] 버튼을 누르면 name, email 값을 바꿔주고 콘솔에 user click, email click 을 찍어주는 간단한 코드를 함수형과 클래스형 구현해보면 아래와 같습니다. //함수형 컴포넌트 예시 import React,..