지미뉴트론 개발일기

리액트에서 부모 컴포넌트의 일부 정보가 변동되어 렌더링이 다시 되는 과정에서자식 컴포넌트도 기본적으로는 다시 렌더링되게 됩니다. 그러나, 항상 자식 컴포넌트들이 지속적으로 렌더링되어 불필요한 과정이 많다면효율성이 좋지 않고 긴 지연 시간을 발생시킬 수 있습니다. 이 과정에서 자식 컴포넌트가 변경되지 않았을 때는, 자식 컴포넌트의 재렌더링을방지하여 최적화를 할 수 있는 기능을 React.memo가 제공하고 있습니다. 이번 글에서는 React.memo 기능의 사용 방법을 간단한 예제를 통하여이해를 해보는 시간을 가져보도록 하겠습니다.  기본 사용 예제React.memo에는 자식 컴포넌트의 선언 시에 감싸주는 방식으로 선언을 진행하면 되며,기본적으로 자식 컴포넌트의 props가 변경되었는지 여부를 판단하여재렌..

리액트로 구현을 진행할 때, 현재 url 정보가 필요한 경우가 있습니다.이 경우, react router에서 제공하는 useLocation hook을 사용하면 쉽게 구현할 수 있는데요.이번 글에서는 이 기능에 대해서 간략한 예제를 통해 살펴보도록 하겠습니다.  사용 예시다음과 같은 url 예시가 있다고 가정해 보겠습니다.https://example.com/products?category=shoes&color=red#reviews여기서 사이트 주소 뒤의 /products 는 경로에 해당하고,? 뒤에 있는 ?category=shoes&color=red 는 쿼리에 해당하며, # 뒤에 있는 #reviews는 해시 값에 해당하는 상황입니다. 이 경우, 위의 값들을 다음 코드 예제를 통해 추출할 수 있습니다.imp..

리액트에서 렌더링 과정 외에서 발생하는 작업인 사이드 이펙트를 처리할 수 있는 훅인useEffect의 사용 방법을 예제 코드를 중심으로 간략하게 정리해보도록 하겠습니다.  useEffect 기본 예제기본적으로 특정 변수의 값이 변경되었을 때마다원하는 이펙트를 실행하게 하는 역할을 수행합니다. 예를 들어, MyVariable이라는 변수가 변경될 때마다console.log의 이펙트 부분이 실행되는 예시는 다음과 같습니다.useEffect(() => { console.log(`변수의 값이 ${MyVariable}로 변경되었습니다.`);}, [MyVariable]); 위 코드를 함수 컴포넌트 내에 포함시켜주면,해당 변수의 값이 바뀔 때마다 해당 로그가 출력되게 됩니다. 만일, 변수 여러 개에 의존성을 모두 걸..

리액트에서 페이지 이동을 구현하는 과정에서 useNavigate는 매우 유용하게 사용됩니다. 상세한 이해를 위하여 해당 훅의 사용 방법에 대하여 간략하게 요약해보도록 하겠습니다. 1. 설치 및 임포트 방법 useNavigate는 react-router-dom 라이브러리에 포함된 훅으로, 해당 라이브러리가 설치되지 않은 경우, 먼저 설치를 진행해주셔야 합니다. // npm을 사용하는 경우 npm install react-router-dom // yarn을 사용하는 경우 yarn add react-router-dom 임포트 및 훅 사용을 위하여 객체를 선언하는 코드 예시는 다음과 같습니다. import { useNavigate } from 'react-router-dom'; const navigate = u..

리액트의 대표 필수 개념이지만 혼동되기 쉬운 props와 state의 차이를 간단한 예제를 기준으로 이해해보도록 하겠습니다. Props props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달할 때 사용되며, 읽기 전용으로 자식 컴포넌트에서는 수정이 불가능합니다. 코드에서 사용되는 방식의 예시 코드 스니펫은 다음과 같습니다. function Welcome(props) { return Hello, {props.name}; } function App() { return ; } App 컴포넌트는 Welcome 컴포넌트에 name이라는 prop을 전달할 것입니다. Welcome 컴포넌트는 이 prop을 사용하여 동적으로 데이터를 렌더링하게 됩니다. 최종 출력 결과는 Hello, Jimmy 텍스트가 h1 태..