다음은 책 리액트를 다루는 기술을 읽고 공부한 내용을 바탕으로 작성된 글입니다. function App() { return ( ... ); } 컴포넌트 를 element로 가지는 Route에 을 element로 가지는 컴포넌트가 Children으로 들어가 있다. 다음을 코드를 이어서 보자. const Articles = () => { return ( ... ... ); }; 이라는 컴포넌트를 사용했다. 이는 'react-router-dom'에서 제공하는 컴포넌트로, Route의 children 으로 들어가는 JSX 엘리먼트를 보여주는 역할을 한다. 즉, 이 코드의 경우 의 내용이 Outlet 컴포넌트가 사용된 자리에 중첩되어 보여진다. 즉, Articles 컴포넌트의 맨 윗 부분에 Article 컴포넌트..

다음 내용은 책 '리액트를 다루는 기술'을 바탕으로 공부한 내용으로 작성된 글입니다. 페이지 주소를 정의할 때는 가끔 유동적인 값을 사용해야 할 때도 있다. ❕ URL 파라미터 예시 : /profile/velopert - 주소의 경로에 유동적인 값을 넣는 형태. - 주로 id 또는 이름을 사용하여 특정 데이터를 조회할 때 사용. ❕ 쿼리스트링 예시 : /article?page=1&keyword=react - 주소의 '?' 이후에 key=value로 값을 정의, &로 구분하는 형태. - 주로 키워드 검색, 페이지네이션, 정렬 방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용 URL 파라미터 사용 URL 파라미터는 useParams 라는 Hook을 사용하여 객체 형태로 조회 가능하다. 👉 useParam..

다음 내용은 책 '리액트를 다루는 기술'을 바탕으로 작성된 글입니다. ❓ 라우팅이란? 웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다. ❓ 싱글 페이지 애플리케이션이란? 하나의 페이지로 이루어진 애플리케이션이라는 의미이다. 싱글 페이지 애플리케이션이란 개념이 생기기 전에는 멀티 페이지 애플리케이션이 사용되었다. 멀티 페이지 애플리케이션에서는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 CSS, JS, 이미지 파일 등의 리소스를 전달받아 브라우저 화면에 보여 주었다. 반면 싱글 페이지 애플리케이션에서는 우선 웹 애플리케이션을 브라우저에 불러와 실행시킨 후, 사용자와의 인터랙션이 발생하면 필요한..

다음 내용은 책 '리액트를 다루는 기술'을 바탕으로 작성된 글입니다. 리액트 컴포넌트에서 상태를 업데이트할 때 불변성을 지키는 것은 매우 중요하다. 기존의 값을 직접 수정하지 않으면서 새로운 값을 만들어 내는 것을 '불변성을 지킨다'고 한다. 다음은 예시이다. const array = [1,2,3,4,5]; const nextArrayBad = array; // 배열을 복사하지 않고 똑같은 배열을 참조함 nextArrayBad[0]= 100; console.log(array === nextArrayBad); // 결과는 true conset nextArrayGood = [...array]; // 배열 내부의 값을 모두 복사 -> 불변성 지켜짐 nextArrayGood[0]=100; console.log(..

다음 내용은 책 '리액트를 다루는 기술'을 바탕으로 작성된 글입니다. 컴포넌트는 다음과 같은 상황에서 리렌더링이 발생한다. 1. 자신이 전달받은 props가 변경될 때 2. 자신의 state가 변경될 때 3. 부모 컴포넌트가 리렌더링될 때 4. forceUpdate 함수가 실행될 때 리렌더링이 되지 않아도 되는 컴포넌트까지 위의 상황을 만족한다는 이유로 리렌더링이 되다 보면, 성능이 심하게 저하 되는 경우가 발생 된다. 이럴 때는 컴포넌트 리렌더링 성능을 최적화해 주는 작업을 해 주어야 한다. 즉, 리렌더링이 불필요할 때에는 리렌더링을 방지해 주어야 한다. React.memo를 사용하여 컴포넌트 성능 최적화 컴포넌트의 리렌더링을 방지할 때는 shouldComponentUpdate라는 라이프사이클을 사용하..

다음 내용은 책 '리액트를 다루는 기술'을 바탕으로 작성된 글입니다. useCallback 함수는 주로 렌더링 성능을 최적화해야 하는 상황에서 사용한다. 주요 기능은, 만들어 놨던 함수를 재사용할 수 있다는 것이다. 컴포넌트 내에서 일반적으로 함수를 선언하면, 컴포넌트가 리렌더링될 때마다 새로 만들어진 함수를 사용하게 된다. 대부분의 경우 문제가 없지만 렌더링이 자주 발생하거나 렌더링 해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화해주는 것이 좋다. useCallback 함수를 사용하면, 컴포넌트 리렌더링이 이루어질 때마다 함수를 재생성하지 않고, 기존에 만들어놨던 함수를 사용할 수 있다. 👉 기본 함수 선언 const onChange = () => { setNumber(e.target.value)..