리액트를다루는기술 리액트를 다루는 기술 : Hooks [useState,useEffect] Hooks는 리액트 16.8에 새로 도입된 기능으로 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서는 할 수 없었던 다양한 작업을 할 수 있게 해준다. useState 상태를 관리해야 한다면 useState를 사용하면 된다. 이 함수가 호출되면 배열을 반환하는데, 그 배열의 첫 번째 원... hooksuseEffect리액트를다루는기술useStatehooks [리액트를 다루는 기술] 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 를 보게되... 리액트를다루는기술리다기리다기 리액트를 다루는 기술 : useRef 일반 HTML + Javascript에서는 Dom요소를 조작하여야 할 때 조작할 HTML tag에 id를 부여하고 Javscript를 통해 DOM 요소를 조작한다. react.js에서도 ref(reference)를 통해 이름을 달아 HTML 요소를 제어할 수 있다. react components(JSX) 안에서 id대신 ref를 통해 DOM 요소를 다루는 이유는 다른 라이브러리나 프레임워크를... 리액트를다루는기술useRefuseRef 리액트를 다루는 기술 : 컴포넌트 반복 map 함수를 사용하여, 동일 내용이 반복적으로 들어가는 html tag와 text를 줄일 수 있다. map 함수 첫번째 매개변수로 callback function을 받으며, callback function의 결과를 하지만 map 함수는 기존의 배열을 가지고 새로운 배열을 만들어 return한다. key key 설정 key 값을 설정할 때에는 map 함수의 인자로 전달되는 함수 내부에서 컴포... 리액트를다루는기술2022032120220321 [리액트를 다루는 기술] 7장 컴포넌트의 라이프사이클 메서드 컴포넌트를 처음 렌더링시, 업데이트하기 전후, 어떤 작업을 처리해야 하거나 불필요한 업데이트를 방지해야할 때 Will 접두사가 붙은 메서드(어떤 작업을 작동하기 전) Did 접두사가 붙은 메서드(어떤 작업을 작동한 후) 라이프사이클의 3가지 카테고리 - 마운트 : 페이지에 컴포넌트가 나타남 - 업데이트 : 컴포넌트 정보를 업데이트 - 언마운트 : 페이지에서 컴포넌트가 사라짐 이때 호출되는 메... 리다기리액트를다루는기술리다기
리액트를 다루는 기술 : Hooks [useState,useEffect] Hooks는 리액트 16.8에 새로 도입된 기능으로 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서는 할 수 없었던 다양한 작업을 할 수 있게 해준다. useState 상태를 관리해야 한다면 useState를 사용하면 된다. 이 함수가 호출되면 배열을 반환하는데, 그 배열의 첫 번째 원... hooksuseEffect리액트를다루는기술useStatehooks [리액트를 다루는 기술] 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 를 보게되... 리액트를다루는기술리다기리다기 리액트를 다루는 기술 : useRef 일반 HTML + Javascript에서는 Dom요소를 조작하여야 할 때 조작할 HTML tag에 id를 부여하고 Javscript를 통해 DOM 요소를 조작한다. react.js에서도 ref(reference)를 통해 이름을 달아 HTML 요소를 제어할 수 있다. react components(JSX) 안에서 id대신 ref를 통해 DOM 요소를 다루는 이유는 다른 라이브러리나 프레임워크를... 리액트를다루는기술useRefuseRef 리액트를 다루는 기술 : 컴포넌트 반복 map 함수를 사용하여, 동일 내용이 반복적으로 들어가는 html tag와 text를 줄일 수 있다. map 함수 첫번째 매개변수로 callback function을 받으며, callback function의 결과를 하지만 map 함수는 기존의 배열을 가지고 새로운 배열을 만들어 return한다. key key 설정 key 값을 설정할 때에는 map 함수의 인자로 전달되는 함수 내부에서 컴포... 리액트를다루는기술2022032120220321 [리액트를 다루는 기술] 7장 컴포넌트의 라이프사이클 메서드 컴포넌트를 처음 렌더링시, 업데이트하기 전후, 어떤 작업을 처리해야 하거나 불필요한 업데이트를 방지해야할 때 Will 접두사가 붙은 메서드(어떤 작업을 작동하기 전) Did 접두사가 붙은 메서드(어떤 작업을 작동한 후) 라이프사이클의 3가지 카테고리 - 마운트 : 페이지에 컴포넌트가 나타남 - 업데이트 : 컴포넌트 정보를 업데이트 - 언마운트 : 페이지에서 컴포넌트가 사라짐 이때 호출되는 메... 리다기리액트를다루는기술리다기