리다기 [리액트를 다루는 기술] 11장 컴포넌트 성능 최적화 실습진행(컴포넌트 성능 최적화) 많은 데이터 렌더링하기 - 크롬 개발자 도구를 통한 성능 모니터링 - React.memo를 통한 컴포넌트 리렌더링 성능 최적화 - onToggle 과 onRemove가 새로워지는 현상 방지 - react-virtualized를 사용한 렌더링 최적화 현재 '할일 2'부터 '할일 2500'까지 모두 리렌더링이 되고 있음(리렌더링 안해도 되는 상황) 최적화 필수 !... 리액트를다루는기술리다기리다기 [리액트를 다루는 기술] 14장 외부 API를 연동하여 뉴스 뷰어 만들기 비동기작업의 이헤 - axios로 API호출해서 데이터 받기 - newssapi API 키 발급받기 - 뉴스 뷰어 ui 만들기 - 데이터 연동하기 - 카테고리 기능 구현 - 리액트 라우터적용 14.1.3 async/await async/await는 Promise를 더 쉽게 사용할 수 있도록 해 주는 ES2017(ES8) 문법 해당 함수 내부 Promise의 앞부분에 await 키워드를 사용 ... 리액트를다루는기술리다기리다기 [리액트를 다루는 기술] 20장 서버 사이드 렌더링 왜 필요한지만 알고 지나가겠습니다..^ 참고하면 좋을 영상(드림코딩엘리) 서버 사이드 렌더링 : UI를 서버에서 렌더링하는 것을 의미 기존의 리액트 프로젝트는 기본적으로 클라이언트 사이드 렌더링 클라이언트 사이드 렌더링 : UI 렌더링을 브라우저에서 모두 처리하는 것. 즉, 자스를 실행해야 만든화면이 사용자에게 보임 CRA 로 프젝생성 개발자 도구 - 네트워크 - localhost 를 보게되... 리액트를다루는기술리다기리다기 [리액트를 다루는 기술] 7장 컴포넌트의 라이프사이클 메서드 컴포넌트를 처음 렌더링시, 업데이트하기 전후, 어떤 작업을 처리해야 하거나 불필요한 업데이트를 방지해야할 때 Will 접두사가 붙은 메서드(어떤 작업을 작동하기 전) Did 접두사가 붙은 메서드(어떤 작업을 작동한 후) 라이프사이클의 3가지 카테고리 - 마운트 : 페이지에 컴포넌트가 나타남 - 업데이트 : 컴포넌트 정보를 업데이트 - 언마운트 : 페이지에서 컴포넌트가 사라짐 이때 호출되는 메... 리다기리액트를다루는기술리다기 [리액트를 다루는 기술] 16장 리덕스 라이브러리 이해하기 리덕스 : 리액트 상태 관리 라이브러리 컴포넌트 상태 업데이트 관련 로직을 다른 파일로 분리 -> 더욱 효율적으로 관리 가능 16.1.1 액션 16.1.2 액션 생성 함수 액션생성함수 : 액션객체를 만들어 주는 함수 16.1.3 리듀서 리듀서(reducer) : 변화를 일으키는 함수 액션 만들어 발생 -> 리듀서가 파라미터(현재상태, 전달받은액션객체)로 받음 -> 두 값을 참조 -> 새로운 ... 리다기리액트를다루는기술리다기 [리액트를 다루는 기술] 2장 JSX 웹팩을 사용시 SVG 파일과 CSS 파일도 불러와서 사용할 수 있음 JSX 코드 앞으로 만들 컴포넌트도 JSX 안에서 작성 ㄱㄴ 컴포넌트를 페이지에 렌더링하는 역활을 하며, react-dom 모듈을 불러와 사용할 수 있음. 이 함수의 첫번째 파라미터에는 페이지에 렌더링할 내용을 JSX 형태로 작성, 두번째 파라미터에는 해당 JSX를 렌더링할 document 내부 요소를 설정합니다. 자스 표현... 리다기리액트리액트를다루는기술리다기
[리액트를 다루는 기술] 11장 컴포넌트 성능 최적화 실습진행(컴포넌트 성능 최적화) 많은 데이터 렌더링하기 - 크롬 개발자 도구를 통한 성능 모니터링 - React.memo를 통한 컴포넌트 리렌더링 성능 최적화 - onToggle 과 onRemove가 새로워지는 현상 방지 - react-virtualized를 사용한 렌더링 최적화 현재 '할일 2'부터 '할일 2500'까지 모두 리렌더링이 되고 있음(리렌더링 안해도 되는 상황) 최적화 필수 !... 리액트를다루는기술리다기리다기 [리액트를 다루는 기술] 14장 외부 API를 연동하여 뉴스 뷰어 만들기 비동기작업의 이헤 - axios로 API호출해서 데이터 받기 - newssapi API 키 발급받기 - 뉴스 뷰어 ui 만들기 - 데이터 연동하기 - 카테고리 기능 구현 - 리액트 라우터적용 14.1.3 async/await async/await는 Promise를 더 쉽게 사용할 수 있도록 해 주는 ES2017(ES8) 문법 해당 함수 내부 Promise의 앞부분에 await 키워드를 사용 ... 리액트를다루는기술리다기리다기 [리액트를 다루는 기술] 20장 서버 사이드 렌더링 왜 필요한지만 알고 지나가겠습니다..^ 참고하면 좋을 영상(드림코딩엘리) 서버 사이드 렌더링 : UI를 서버에서 렌더링하는 것을 의미 기존의 리액트 프로젝트는 기본적으로 클라이언트 사이드 렌더링 클라이언트 사이드 렌더링 : UI 렌더링을 브라우저에서 모두 처리하는 것. 즉, 자스를 실행해야 만든화면이 사용자에게 보임 CRA 로 프젝생성 개발자 도구 - 네트워크 - localhost 를 보게되... 리액트를다루는기술리다기리다기 [리액트를 다루는 기술] 7장 컴포넌트의 라이프사이클 메서드 컴포넌트를 처음 렌더링시, 업데이트하기 전후, 어떤 작업을 처리해야 하거나 불필요한 업데이트를 방지해야할 때 Will 접두사가 붙은 메서드(어떤 작업을 작동하기 전) Did 접두사가 붙은 메서드(어떤 작업을 작동한 후) 라이프사이클의 3가지 카테고리 - 마운트 : 페이지에 컴포넌트가 나타남 - 업데이트 : 컴포넌트 정보를 업데이트 - 언마운트 : 페이지에서 컴포넌트가 사라짐 이때 호출되는 메... 리다기리액트를다루는기술리다기 [리액트를 다루는 기술] 16장 리덕스 라이브러리 이해하기 리덕스 : 리액트 상태 관리 라이브러리 컴포넌트 상태 업데이트 관련 로직을 다른 파일로 분리 -> 더욱 효율적으로 관리 가능 16.1.1 액션 16.1.2 액션 생성 함수 액션생성함수 : 액션객체를 만들어 주는 함수 16.1.3 리듀서 리듀서(reducer) : 변화를 일으키는 함수 액션 만들어 발생 -> 리듀서가 파라미터(현재상태, 전달받은액션객체)로 받음 -> 두 값을 참조 -> 새로운 ... 리다기리액트를다루는기술리다기 [리액트를 다루는 기술] 2장 JSX 웹팩을 사용시 SVG 파일과 CSS 파일도 불러와서 사용할 수 있음 JSX 코드 앞으로 만들 컴포넌트도 JSX 안에서 작성 ㄱㄴ 컴포넌트를 페이지에 렌더링하는 역활을 하며, react-dom 모듈을 불러와 사용할 수 있음. 이 함수의 첫번째 파라미터에는 페이지에 렌더링할 내용을 JSX 형태로 작성, 두번째 파라미터에는 해당 JSX를 렌더링할 document 내부 요소를 설정합니다. 자스 표현... 리다기리액트리액트를다루는기술리다기