React로 개발을 하다 보면 이벤트 핸들링은 피할 수 없다. 버튼 클릭, 폼 입력, 마우스 호버 등 사용자와의 상호작용을 처리하기 위해서는 이벤트를 다뤄야 한다. 하지만 브라우저마다 이벤트 처리 방식이 조금씩 다르다. React는 이런 브라우저 간의 차이를 어떻게 해결했을까?  합성 이벤트React는 브라우저 간 차이를 해결하기 위해 합성 이벤트$_{synthetic \space event}$ 개념을 도입했다. 브라우저의 네이티브 이벤트를 한 번 감싸서 모든 브라우저에서 동일하게 동작하도록 만든 것이다. 브라우저마다 이벤트를 처리하는 방식이 다르다는 점은 웹 개발에서 오랫동안 골칫거리였다. 예를 들어 Internet Explorer에서는 이벤트 객체를 전역 window 객체를 통해 접근해야 하고, 다른..

React로 개발을 하다 보면 사용자의 입력을 받아야 하는 상황이 자주 생긴다. 이메일 입력, 게시글 작성, 설문 응답처럼 폼을 사용하는 기능을 구현할 때가 많다. React는 선언적인 특성을 가지고 있어서 기존 HTML 폼을 다루는 방식과는 다른 접근이 필요하다. 폼을 다루는 방식은 크게 Uncontrolled Components와 Controlled Components로 나눌 수 있다.  Uncontrolled componentUncontrolled Components는 React가 직접 상태를 제어하지 않는 폼 요소를 의미한다. 일반적인 HTML 폼처럼 DOM이 직접 폼 데이터를 관리하며, React는 필요할 때만 ref를 통해 값을 읽어오는 방식이다. 기본적인 Uncontrolled Compone..

useEffect를 사용할 때 보통 이렇게 작성한다.useEffect(() => { // ... return () => { // cleanup.. }}, [deps]) 우리가 컴포넌트에서 useEffect를 호출하면, React는 내부적으로 여러 단계를 거쳐 Effect 객체를 생성하고 관리한다. 먼저 우리가 호출하는 useEffect는 이 파일에서 시작된다.앞으로 파일 경로가 계속 나오게 될텐데 facebook/react의 repository를 참고하면 된다.`packages/react/src/ReactHooks.js`export function useEffect( create: () => (() => void) | void, deps: Array | void | null,): void { c..

큰 React 프로젝트를 구성할 때 코드의 관리와 가독성을 높이기 위해 각 디렉토리별로 index.ts 파일을 활용하는 전략이 많이 사용된다. 이 방식을 활용하면 여러 모듈을 효과적으로 관리하면서, 프로젝트의 구조를 조금 더 확실하게 해주어 이번 프로젝트에 도입하게 되었다. 이렇게 했을 때 가지는 이점은 아래와 같다. 1. 깔끔한 임포트디렉토리 내에 위치한 index.ts 파일은 외부에서 해당 디렉토리를 지칭하는 이름만으로 모듈을 임포트할 수 있게 해줌으로써 비교적 간단해진다. 기존에 사용하던 방식에서는 상대 경로가 더 길어질 수 있는데 반해, index.ts 파일을 사용하면 import 구문이 조금 더 깔금해지고 관리하기 쉬워진다.// index.ts가 없는 경우import { Ch..

컴포넌트 분리는 React 개발에서 기본적인 원칙으로 사용자 인터페이스를 독립적이고 재사용 가능한 부분으로 나누는 것이다. 이 방법론은 외형적인 조직에 관한 것 뿐만 아니라, 애플리케이션의 장기적인 생존성, 유지보수성 및 개발 팀의 효율성에 중대한 영향을 미친다. 향상된 코드 유지보수성 컴포넌트 분리를 위한 가장 설득력 있는 주장 중 하나는 코드 유지보수성에서의 극적인 개선이다. 개발자들이 기능을 별개의 컴포넌트로 분리함으로써 애플리케이션의 한 부분에서의 변경이 의도치 않게 다른 부분에 영향을 미치지 않도록 한다. 이러한 분리는 업데이트와 디버깅을 단순화한다. 왜냐하면 어떤 변경의 범위도 자연스럽게 수정되는 컴포넌트로 한정되기 때문이다. 예시 - 사용자 정보 표시와 편집 기능 및 데이터 가져오기 로직을 ..

컴포넌트 생명주기의 세 단계 리액트 컴포넌트의 생명주기는 마운팅$_{mounting}$, 업데이트$_{update}$, 언마운팅$_{unmounting}$으로 크게 세 가지 주요 단계로 나눌 수 있다. 1. 마운팅 단계 마운팅 단계는 React 컴포넌트의 생명주기에서 컴포넌트가 생성되는 단계이다. 최초로 DOM에 삽입되며 애플리케이션에서 컴포넌트가 시작된다. 이 과정에서 몇 가지 핵심적인 생명주기 메서드가 호출되며 각각의 메서드는 컴포넌트의 초기화와 설정에 필수적인 역할을 한다. constructor(props) constructor 메서드는 컴포넌트의 생성자 함수로, 컴포넌트가 생성될 때 가장 먼저 실행된다. 이 메서드는 컴포넌트의 초기 상태를 설정하거나, 이벤트 핸들러를 바인딩하는 데 주로 사용된다...

React 개발 영역에서 프로젝트의 파일과 디렉토리를 조직하는 방식은 생산성과 애플리케이션의 유지보수성에 상당한 영향을 미칠 수 있음 프로젝트가 확장됨에 따라 잘 고안된 디렉토리 구조는 애플리케이션 아키텍처의 기반이 됨 기본 이해 특정 디렉토리 구조에 대해 뛰어들기 전에, React 프로젝트의 핵심 구성 요소를 파악하는 것이 필수적임 React 애플리케이션은 핵심적으로 서로 상호작용하는 컴포넌트로 구성되어 사용자 인터페이스를 형성함 컴포넌트 외에도 애플리케이션은 상태 관리, 라우팅, 유틸리티 함수, 스타일링을 포함할 수 있음 이러한 요소를 인식하는 것은 프로젝트의 요구에 맞는 조직 전략을 고안하는 첫 단계임 단순한 vs. 복잡한 프로젝트 구조 프로젝트의 폴더 구조의 복잡성은 애플리케이션 자체의 복잡성을 ..