react3 [React] Context API 사용법 일반적으로 React에서 컴포넌트 간에 데이터를 전달할 경우 props를 사용하여 부모 컴포넌트 -> 자식 컴포넌트로 데이터를 넘겨주고 이어받는 방식을 많이 사용하게 된다. 그런데 멀리 떨어진 컴포넌트로 데이터를 전달하거나, props를 사용하기 적절치 않은 경우가 있다. 그럴 때 유용하게 사용할 수 있는 Context API를 설명하고, 적용하여 프로젝트를 개선한 사례를 기록하려고 한다. 1. Context API의 개념 React Context API는 React 애플리케이션에서 전역 상태를 관리하고 컴포넌트 간에 데이터를 효율적으로 전달하기 위한 도구이다. Props를 계속해서 컴포넌트로 전달하는 번거로움을 줄이고, 상태 및 데이터를 보다 쉽게 공유할 수 있도록 도와주는 역할을 한다. 2. Cont.. 2023. 8. 26. [리액트] useEffect React에서 useEffect 함수는 컴포넌트가 렌더링 될 때마다 실행되는 함수입니다. useEffect 함수는 컴포넌트의 상태나 속성 값 등이 변경될 때마다 호출됩니다. useEffect 함수는 이전 렌더링에서의 상태 값을 가져올 수 있으므로, 이전 값과 현재 값을 비교하여 변경이 있을 경우에만 추가적인 작업을 수행할 수 있습니다. useEffect 함수는 함수 컴포넌트 내에서 사용되며, 두 개의 매개 변수를 받습니다. 첫 번째 매개 변수는 함수 컴포넌트가 렌더링될 때 실행할 함수이며, 두 번째 매개 변수는 의존성 배열입니다. 의존성 배열은 useEffect 함수가 의존하는 값의 배열로, 해당 값이 변경될 때마다 useEffect 함수를 실행합니다. 빈 배열을 전달하면 컴포넌트가 처음 렌더링 될 때만.. 2023. 3. 4. 리액트 (React) React React는 Facebook에서 개발한 UI 라이브러리로, 모던 웹 애플리케이션 개발에 많이 사용됩니다. React는 다음과 같은 이유로 많은 개발자들에게 선택되어 사용되고 있습니다. Component 기반 구조: React는 Component 기반의 구조를 가지고 있어, UI를 작은 단위로 쪼개고 각각의 컴포넌트로 관리할 수 있습니다. 이를 통해 코드의 재사용성과 유지보수성이 높아지며, 대규모 애플리케이션 개발에 적합합니다. Virtual DOM: React는 Virtual DOM을 사용하여 UI 업데이트 성능을 최적화합니다. Virtual DOM은 실제 DOM과 동기화되는 가상의 DOM 구조를 사용하여, 변경된 부분만 업데이트하고 전체 UI를 다시 렌더링하는 것을 방지합니다. 이를 통해 U.. 2023. 2. 22. 이전 1 다음
