React Hook Form 렌더링 최적화
·
Programming/React
회사에서 개인의 기술 성장을 위하여 3주에 1번씩 사내 기술 세션 발표가 열리는데, 비록 2주차였지만 더욱 몰두하고자 자원하여 발표한 사내 기술 세션 발표 내용입니다.최근에 회사에서 새로운 기능을 개발하면서, 자연스럽게 react-hook-form을 처음 접하게 되었습니다. 처음엔 단순히 폼 상태를 다루기 위한 도구 정도로 생각했지만, 실제로 기능을 만들다 보니 생각보다 많은 개념들이 녹아 있었고, 특히 "렌더링 최적화" 관점에서 매우 중요한 포인트들이 존재한다는 걸 알게 되었습니다. 이 최적화를 진행한 배경이 기능은 고객에게 직접적으로 맞닿는 인터페이스가 아니었기 때문에 백오피스 성능이 상대적으로 중요하지는 않았습니다. 하지만 react-hook-form 라이브러리를 사용하면서 고객의 데이터를 입력한 ..
FE 질문 (2)
·
Technical Interview
1. 클로저에 대해서 설명해주세요.클로저란, 함수가 선언될 때의 스코프를 기억하며, 함수가 생성된 이후에도 그 스코프에 접근할 수 있는 기능을 말한다.(함수가 자신이 생성된 환경을 기억하는 것)자바스크립트의 함수가 일급 객체라는 특성과 렉시컬 스코프의 조합으로 만들어진다.1-1. 클로저는 언제 활용하나요?클로저는 변수와 함수의 접근 범위를 제어하고, 특정 데이터와 상태를 유지하기 위해 사용된다.1) 데이터 은닉 : 외부에서 접근할 수 없는 비공개 변수와 함수를 만들 수 있다. 데이터를 은닉하여 외부 접근을 막고, 데이터 무결성을 유지할 수 있다. 특정 함수 내부에서만 접근 가능한 변수를 생성하고, 조작할 수 있는 함수만 외부로 노출하여 안전하게 데이터를 관리한다.2) 비동기 작업에 활용 : 비동기 작업에..
FE 질문 (1)
·
Technical Interview
1. 리액트의 props와 state에 대해서 설명해주세요.props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터이다.자식 컴포넌트는 props를 수정할 수 없다.이런 특성은 컴포넌트 간의 데이터 흐름을 예측 가능하게 하고, 컴포넌트의 재사용성을 높인다. state는 컴포넌트 내부에서 관리되는 데이터이다. state는 동적으로 변경될 수 있고, 컴포넌트의 렌더링에 영향을 미친다.state을 변경하면 컴포넌트는 다시 렌더링되며, UI가 업데이트된다. state는 주로 사용자 입력, 네트워크 요청의 응답에 따라 변하는 데이터를 관리할 때 사용된다.1-1. props가 자식 컴포넌트에서 변하지 않는 이유는 무엇인가요? 리액트의 단방향 데이터 흐름 원칙 때문이다. 리액트의 이러한 설계는 컴포넌트 간의 데이..