Front-End, CS 스터디/[도서] 리액트를 다루는 기술11 [도서] 리액트를 다루는 기술 #컴포넌트 3.1 클래스형 컴포넌트 - 클래스형 컴포넌트와 함수 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것이다. - 함수 컴포넌트의 장점은 클래스형 컴포넌트보다 선언하기가 훨씬 편하다. - 또한, 메모리 자원도 클래스형 컴포넌트보다 덜 사용하며, 프로젝트를 완성하여 빌드한 후 배포할 때도 함수 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다. - 함수 컴포넌트의 주요 단점은 state와 라이프사이클 API의 사용이 불가능하다는 점이었으나, 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었다. 3.3 props - props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 .. 2022. 11. 13. [도서] 리액트를 다루는 기술 #JSX 2.1 코드 이해하기 - import 구문, 이렇게 모듈을 불러와서 사용하는 것은 사실 원래 브라우저에는 없던 기능이다. - 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해 주는 환경인 Node.js에서 지원하는 기능 - Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다. - 이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용한다. 번들(bundle)은 묶은 다는 뜻으로 파일을 묶듯이 연결하는 것 - 대표적인 번들러로 웹팩, Parcel, browserify라는 도구들이 있으며 리액트 프로젝트에서는 주로 웹팩을 사용하는 추세인데 편의성과 확장성이 다른 도구보다 뛰어나기 때문이다. - 번들러 도구를 사용하면 import(또는 requ.. 2022. 11. 11. [도서] 리액트를 다루는 기술 #컴포넌트의 라이프사이클 메서드 7. 컴포넌트의 라이프사이클 메서드 - 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. - 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. - 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고 불필요한 업데이트를 방지해야 할 수도 있다. - 이 때 컴포넌트의 라이프사이클 메서드를 사용하며, 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. 7.1 라이프사이클 메서드의 이해 - 라이프사이클 메서드의 종류는 총 9가지이다. - Will 접두사가 붙은 메서드는 어떤 작업을 작동하지 전에 실행되는 메서드이다. - Did 접두.. 2022. 11. 9. [도서] 리액트를 다루는 기술 #컴포넌트 성능 최적화 11.1 많은 데이터 렌더링하기 - useState(createBulkTodos()) 라고 작성하면 리렌더링될 때마다 createBulkTodos 함수가 호출되지만, useState(createBulkTodos)처럼 파라미터를 함수 형태로 넣어 주면 컴포넌트가 처음 렌더링될 때만 createBulkTodos 함수가 실행된다. 11.2 크롬 개발자 도구를 통한 성능 모니터링 - 리액트 v17 부터는 리액트 전용 개발자 도구인 React DevTools를 사용해야 성능 분석을 자세하게 할 수 있다. - 사용할 항목을 체크한 다음, 리액트 개발자 도구의 Profiler라는 탭에서 파란색 녹화 버튼을 누르면 성능 분석 결과가 나온다. - Render duration은 리렌더링에 소요된 시간을 의미하며, 1ms는.. 2022. 11. 7. [도서] 리액트를 다루는 기술 #Hooks 8. Hooks - Hooks는 리액트 v16.8에 새로 도입된 기능 - 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. 8.1 useState - useState는 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 준다. - 함수 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 된다. 1️⃣ useState를 여러 번 사용하기 - 하나의 useState 함수는 하나의 상태 값만 관리할 수 있다. - 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러 번 사용하면 된다. 8.2 useEffect - useEffect는 리액트.. 2022. 11. 5. [도서] 리액트를 다루는 기술 #서버 사이드 렌더링 20.1 서버 사이드 렌더링의 이해 - 서버 사이드 렌더링은 UI를 서버에서 렌더링하는 것을 의미한다. - 리액트 프로젝트는 기본적으로 클라이언트 사이드 렌더링을 하고 있다. - 클라이언트 사이드 렌더링은 UI 렌더링을 브라우저에서 모두 처리하는 것. 즉, 자바스크립트를 실행해야 만든 화면이 사용자에게 보인다. - 즉, 이 페이지는 처음에 빈 페이지라는 뜻, 그 이후에 자바스크립트가 실행되고 리액트 컴포넌트가 렌더링 되면서 보이는 것이다. - 서버 사이드 렌더링을 구현하면 사용자가 웹 서비스에 방문했을 때 서버 쪽에서 초기 렌더링을 대신 해준다. 그리고 사용하자가 html을 전달받을 때 그 내부에 렌더링된 결과물이 보인다. 1️⃣ 서버 사이드 렌더링의 장점 - 구글, 네이버, 다음 등의 검색 엔진이 만든.. 2022. 11. 1. 이전 1 2 다음
