코딩 헬스장

1. zustand ? 간단한 Flux 구조를 사용하는 확장 가능한 상태 관리 라이브러리 입니다. Hook 기반으로 편리한 API들을 제공합니다. * Flux 구조란 ? - 어느 방향으로 데이터가 전달될지 알지 못하는(양방향 데이터흐름) MVC 패턴의 복잡성을 해소하기 위해, Flux 패턴을 통해 데이터가 단 방향으로만 변경될 수 있도록 만든 구조입니다. 기존 React의 MVC 패턴의 단점 상태값을 하위 컴포넌트로 전달해주기 위해 불필요한 컴포넌트에 상태값을 선언해야됩니다. MVC 패턴 단점 해결방안 상태값을 store에서 관리하여 필요한 컴포넌트에서만 가져와 사용할 수 있도록 해결합니다. (Flux) 2. 다른 상태관리 라이브러리와 비교 Redux와 비교 1. Redux를 통해 메뉴 개발한 경험을 바..

복사한 값을 테이블 입력 컬럼에 붙여 넣기 하여 데이터가 입력되도록 하는 복사 & 붙여넣기 기능을 추가하다가 문제가 발생했습니다. keyDown 이벤트에 복사 키(Ctrl+C)를 눌렀을 때 해당 값을 전역 변수로 저장하고, 붙여 넣기 키(Ctrl+V)를 눌렀을 때 현재 컬럼 값이 복사된 타입과 같으면 값을 넣어주는 로직을 추가하여 수정하였습니다. 이렇게 처리하니 해당 페이지에서 복사, 붙여 넣기 하면 정상적으로 동작 하나, 그 외 경우(ex 액셀 데이터, 다른 인터넷 페이지.. )에서 복사한 값을 붙여 넣기 할때 문제가 발생했습니다. (그 외 경우는 다른 페이지이기 때문에 로직을 짠 keyDown 이벤트가 타지 않으므로) 원인을 파악하여 아래와 같이 간단한 예시로 정리해봤습니다. 1. 내 코드의 문제점 ..

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

React를 사용할 때는 컴포넌트를 클래스 또는 함수로 정의할 수 있습니다. 클래스 컴포넌트로 정의를 할 경우 각각의 컴포넌트는 컴포넌트의 라이프 사이클 즉, 수명주기가 존재합니다. 컴포넌트의 수명은 일반적으로 페이지에서 렌더링 되기 전 준비 과정에서 시작해 페이지에서 사라질 때 끝이 납니다. 위 이미지는 리액트 클래스형 컴포넌트의 라이프 사이클을 나타냅니다. (v16.4) 1. 라이프 사이클의 분류 (v16.4 기준으로 라이프 사이클에 대해 정리해보겠습니다.) 라이프 사이클은 생성 될 때, 업데이트 할 때, 제거 할 때로 크게 세가지 유형으로 나눌 수 있습니다. (위 사진 참고) 이를 리엑트에서 마운트, 업데이트, 언마운트 라고 합니다. 마운트 : 컴포넌트가 처음 실행될 때 그것을 Mount라고 표현 ..

전역변수는 모든 영역에서 사용할 수 있는 변수를 말합니다. 전역변수를 선언하면 코드의 블록, 내부,외부 함수 등의 영역에 상관없이 어디서든 불러와 사용 할 수 있습니다. 1. 내 코드의 문제점 현재 진행 중인 프로젝트 구조 상 상태관리 라이브러리를 사용하지 않다보니, 개발을 하다가 굳이 state로 관리하지 않아도 되는 데이터들이 있었고, 이러한 데이터들을 자식 컴포넌트에서 사용하기 위해서 계속해서 여러 값들을 내려주다보니 점점 많아져 관리하기도 힘들고 알아보기도 힘들었습니다. 그래서 이러한 데이터들을 쉽게 관리 하고, 하위 컴포넌트에서도 쉽게 사용 가능하도록 개선해보고자 했습니다. 2. 개선 class GlobalJS extends PureComponent { //region >> constructor..