React란 무엇이고 장점은? 그리고 컴포넌트란?
React는 UI를 구축을 위한 JavaScript 기반의 프론트엔드 라이브러리이다. 주로 SPA를 만들 때 사용된다. React는 virtual DOM을 사용해 앱 성능을 향상하고, CSR이 가능하다. 또한 다른 프레임워크와 함께 사용할 수 있으며, 컴포넌트 가독성이 높고 유지보수가 쉽다. 여기에서 컴포넌트란 레고 블록과 같이 작은 단위를 의미하고, React는 컴포넌트를 조립하듯이 개발한다. 컴포넌트는 캡슐화, 확장성, 결합성, 재사용성과 같은 장점을 갖고 있다.
React Router와 같은 CSR이란?
CSR이란 웹 페이지의 렌더링이 클라이언트, 즉 브라우저에서 일어나는 것을 의미한다. 서버와 클라이언트 간 데이터 트래픽이 감소하고 렌더링이 한 번만 발생하기 때문에 페이지 이동이 빠르다는 장점이 있지만, SEO에는 불리하다는 단점이 있다. 보안 측면에서는 쿠키에 사용자 정보를 저장하기 때문에 위험 요소가 될 수 있다.
useState에서 state를 직접 변경하지 않고 setState를 변경하는 이유는? (중요)
state는 불변성을 유지해야 하기 때문이다. React에서 컴포넌트는 setState를 확인해 업데이트가 필요할 때만 render 함수를 호출하는데, state를 직접 변경하면 React가 render 함수를 호출하지 않아 상태 변경이 일어나도 렌더링되지 않을 수 있다.
별코딩, React Hooks에 취한다 - useState 15분만에 마스터하기 | 리액트 훅스 시리즈
prop drilling이란?
prop drilling은 props를 하위 컴포넌트에 전달하는 용도로만 쓰이는 여러 컴포넌트들을 거치면서 React의 컴포넌트 트리에서 데이터를 전달하는 과정을 의미한다. 예컨대 App.js에서 데이터를 하위 컴포넌트까지 쭉 전달하면 데이터가 변경될 때마다 일일이 고쳐야 하기 때문에 불편하다. 이를 해결하기 위해 React의 context API나 상태 관리 라이브러리인 Redux, MobX를 사용할 수 있다.
Edeh Israel Chidera, How to Avoid Prop Drilling with the React Context API
Bonglog, Context API란? 소개 및 사용법
JSX란?
JSX는 JavaScript를 확장한 문법이다. HTML처럼 표현할 수 있는 React 엘리먼트를 생성한다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있다.
const element = <h1>Hello, world!</h1>;
코딩앙마, React JS #3 컴포넌트, JSX - 초보자를 위한 리액트 강좌
useMemo와 useCallback 메서드를 활용해 최적화하는 원리는?
useMemo와 useCallback은 웹의 성능 최적화를 위해 사용되는 React의 Hook이다. useMemo는 특정 결과 값을, useCallback은 특정 함수를 재사용하고 싶을 때 사용한다. 두 메서드는 의존성 배열이 변경될 때만 메모이제이션된 값/함수를 반환한다.
별코딩, React Hooks에 취한다 - useMemo 제대로 사용하기 | 리액트 훅스 시리즈
별코딩, React Hooks에 취한다 - useCallback 짱 쉬운 강의 | 리액트 훅스 시리즈
useCallback의 동작 원리는?
useCallback은 메모이제이션된 콜백을 반환한다. 의존성 배열이 변경되면 새로운 함수를 반환하고, 변경되지 않으면 기존 함수를 반환한다.