스터디/React (4) 썸네일형 리스트형 [React] 리액트 스터디 4일차 11.3# 컴포넌트가 리렌더링되는 상황1. 자신이 전달받은 props가 변경될 때2. 자신의 state가 바뀔 때3. 부모 컴포넌트가 리렌더링될 때4. forceUpdate 함수가 실행될 때 forceUpdate(): props, state와 다른 data를 통해서 리렌더링 되는 상황에서 변경된 부분만 찾아서 update해줌.(최대한 사용하지 않는 쪽으로..) 11.4 React.memo()컴포넌트의 props가 변경되지 않으면 리렌더링하지 않도록 설정함. 11.5 - useState의 함수형 업데이트 기능 사용함수형 업데이트: 새로운 상태를 파라미터로 넣는 대신, 상태 업데이트를 어떻게 할지 정의하는 함수를 파라미터로 넣음. - useReducer 사용useReducer 사용법: 두 번째 파라미터에 .. [React] 리액트 스터디 3일차 ## 프로젝트 진행 순서 ##1. 프로젝트 준비index.css에 .body{margin, padding 수정}, 필요 없는 파일 삭제 2. UI 구성하기src -> components 파일 생성 후 디렉토리 구조 구상항상 컴파일 가능한 상태로 프로젝트 진행하기!!!UI 배치와 관련된 기초적인 css는 styled-components를 사용해 완성해두기별도의 props 전달 없이 컴포넌트의 흐름을 나타내는 정도로 구현(이후 props를 통해 기능을 추가하고 데이터를 전달받음) 3. 기능 구현하기 [React] 리액트 스터디 2일차 8.1 useState컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌const [value, setValue] = useState(0);value: 상태 값setVaule: 상태를 설정하는 함수0: 상태의 기본값 8.2 useEffect컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 함 8.3 useReducer현재 상태와 Action 값을 전달받아 새로운 상태를 반환하는 함수이다. [React] 리액트 스터디 1일차 1.1 자바스크립트를 통한 리액트가 급부상한 이유+++1.1.1데이터를 처리하는 Model과 사용자에게 보여지는 View가 존재함.기존의 DOM과 새로운 DOM 두 개의 뷰를 비교함. render 함수를 통해 업데이트가 발생한 컴포넌트만 리렌더링 함. +++1.2.1 Virtual DOM렌더링, 리렌더링 ex) 인스타 릴스같은 지속적으로 데이터가 변화하는 대규모 애플리케이션 +++1.2.2프레임워크와 라이브러리의 차이점? 리액트는 라이브러리이다.여러 라이브러리와 섞어서 리액트를 사용함. 다른 프레임워크와 혼용하여 사용 가능함. +++2.1--- bundler 이해 못함, 모듈? 파일 로더? 웹의 동작 과정 알아두기>> 번들링: 파일 묶기, 압축 +++2.2JSX는 자바스크립트 문법이 아님.개발자들이 임의.. 이전 1 다음