개발하자

많은 데이터 렌더링 하기 listItem 하나를 리렌더링 하는데에 158.6ms 가 걸림 아이콘, 이미지를 사용하지 않아서 책보다는 적게 걸렸지만 대부분의 요소를 리렌더링 함 느려지는 원인 1. 리렌더링 발생 상황 자신이 전달받은 props가 변경될 떄 자신의 state가 바뀔 떄 부모 컴포넌트가 리렌더링 될 떄 forcUpdate 함수가 실행될 때 2. 코드 리렌더링 과정 할 일 체크를 하면 App 컴포넌트의 state 가 변경되면서 App 컴포넌트 리렌더링 부모컴포넌트가 리렌더링 돼서 TodoList 컴포넌트 리렌더링 그 안에있는 컴포넌트들도 리렌더링 3. 최적화 작업 TodoListItem 을 매번 리렌더링 하지 않고 변경된 부분에 한해서 리렌더링 할 수 있도록 최적화 할 수 있음 (리렌더링 방지)..

CSS 기본 스타일링 방식 1. 주의 사항 CSS 클래스를 중복되지 않게 만들어야 함 CSS Selector 이용: CSS 규칙을 적용할 요소를 의미함 .App .logo { // App 안에 있는 logo class를 탐색 } 네이밍 규칙 이용 BEM 네이밍 컴포넌트 이름 -클래스 (리액트 파일 자동 생성시) https://getbem.com/introduction/ BEM — Introduction Introduction On smaller brochure sites, how you organize your styles isn’t usually a big concern. You get in there, write some CSS, or maybe even some SASS. You compile it..

useState 컴포넌트 내의 상태를 유지하기 위해서 사용 useEffect 렌더링 될 때마다 수행해야하는 작업 마운트, 업데이트 이후에 해야할 일들을 자바스크립트 코드로 처리하기 위함 DOM이 업데이트 되었음을 보장함 componentDidMount, componentDidUpdate의 기능을 함 마운트, 업데이트 이후. 언마운트 전에 해야할 일들을 여기서 수행할 수 있음 이벤트 리스너 등록, ref 접근, fetch cleanup 할 것들을 리턴해주면 됨 dependency를 매개변수로 줄 수 있음 빈배열([])을 매개변수로 줄 경우 처음 컴포넌트가 실행되어 마운트 됐을 때에만 동작함 dependency가 변경되었는지 확인 후 변경되었을 때에만 실해됨 useReducer action에 따른 상태변경 ..

라이프사이클 메서드의 이해 함수 컴포넌트는 제공하지 않음 will: 작업 전 실행, did: 작업 후 실행 1. mount (생성 될 때) 2. update props, state가 변경 될 때 forceUpdate()가 실행 될 때 3. unmount (제거 될 때) 라이프사이클 메서드 살펴보기 1. render() 컴포넌트의 view에 들어갈 요소들을 결정함 2. constructor 컴포넌트가 처음 mount 될때 실행되는 메소드 3. getDerivedStateFromProps props와 state를 동기화 함 ??? 이전의 값과 비교하여 state를 업데이트 할지 결정함 4. componentDidMount mount 이후에 실행해야할 것들을 실행함 이벤트 리스너 등록, 엘리먼트 조작 등 마운..

자바스크립트 배열의 map() 함수 jsx 내부에서 사용할 수 있는 js 반복문 문법? 리턴값이 존재하는 반복문은 뭐든 가능 할 듯 (reduce, filter, find 등) → 확인 필요함 데이터 배열을 컴포넌트 배열로 변환하기 function Component(props) { const array = [1,2,3,4] const numberList = array.forEach(number=> {number}) return numberList } key virtual DOM이 업데이트 여부를 쉽게 구분하기 위해서 li 엘리먼트에 key prop을 생성 해야함 unique한 값이어야 하고 배열의 인덱스는 사용할 수는 있지만 효율적으로 리렌더링 되지 않기 때문에 다른 고유값을 사용하는 것이 좋다 인덱스는..

ref는 어떤 상황에서 사용해야 할까? ref : Selector의 역할을 하는 것 selector에 대해서!!!! react에서 DOM에 접근하지 않고 상태를 변경함으로써 대부분 해결 할 수 있다. state만으로 해결할 수 없는 경우에 ref를 사용해야한다→ 어떤 상황에 필요한지 명확히하기 특정 input에 포커스 주기 스크롤박스 조작하기 canvas 요소에 그림 그리기 → 어떤 상황 이후에 다른 돔 객체를 접근하여 변경해야할 경우? ref 사용 함수 컴포넌트는 useRef라는 Hook이 있기 때문에 클래스 컴포넌트에서 적용 되는 방식으로 사용 1. 콜백 함수로 ref 설정 원하는 이름에 dom 객체를 할당 함 ex) this.input, this.submit 등 class Component { re..

리액트의 이벤트 시스템 html에서 제공하는 이벤트 시스템과 유사함 주의 사항 카멜표기법 : onClick 함수형태로 전달 DOM 요소에만 설정할 수 있음 (컴포넌트에 대해서는 설정 할 수 없음 클래스 컴포넌트 웹 브라우저의 네이티브 이벤트를 감싸는 객체이기 때문에 네이티브 이벤트와 똑같이 사용하면 됨 여러개의 state를 유지하고 이벤트로 업데이트 해야할 때 name과 같은 tag attribute 를 state와 같은 key 값으로 지정하여 사용 할 수 있음 handleChange = (e) => { this.setState({[e.target.name] : e.target.value}) } 이벤트 리스너를 arrow function 로 사용함→ 기존의 함수 형태로 사용하면 this binding을 ..

UI를 만들고, 나타날 때, 사라질 떄, 변경이 일어날 떄 주어진 작업들을 처리함 컴포넌트 생성 방식 리액트는 함수 컴포넌트와 클래스 컴포넌트를 생성할 수 있음 클래스 함수 장점 라이프 사이클 API를 사용할 수 있기 때문에 컴포넌트의 흐름을 파악하기 좋음 선언하기 편하고 자원을 덜 사용함 단점 생성시 API를 모두 사용할 수 있게끔 하기 때문에 사용하지 않는 것들 까지 가지고 있어 자원을 더 많이 사용 함 state와 라이프 사이클 API 사용이 불가능⇒ Hook으로 해결할 수 있음 props ( properties) 부모 컴포넌트에서 주입 받은 데이터들 (값, 객체, 함수, 배열 등) 사용 방법 기본 const MyComponent = props => { return 안녕하세요, 제 이름은 {prop..

Module Bundler, Transpiler 1. Module Bundler 별개의 js 파일을 script 태그로 다운로드 받을 경우 파일이 다르더라도 같은 변수명이나 함수명에 대한 오류가 발생하는데 이러한 문제를 해결해 줌 분리되어 있는 파일을 파일별 scope를 구분지어 하나의 파일로 통합시켜줌 웹팩의 경우 통합하려면 어차피 파일을 다 읽어야하는데 그 김에 할 수 있는 것들을 loader나 plugin으로 추가할 수 있음 webpack, rollup 2. Transpiler 최신버전의 자바스크립트를 지원하지 않는 환경, 예를 들면 es6를 지원하지 않는 환경에서 동작할 수 있도록 구 표준을 준수하는 코드로 바꿔줌 babel JSX란? 익숙한 markup 형태로 개발을 할 수 있도록 해주는 문법 ..

왜 리액트인가? 자바스크립트만으로도 규모가 큰 어플리케이션을 만들수 있는 시대가 됐음 개인 컴퓨터 성능이 좋아짐 브라우저마다 달랐던 것들을 표준화 함 (EcmaScript) 모듈화 작업을 표준화함 (CommonJS, ESM, AMD) 웹서버와 비동기적 데이터 교환이 가능해짐 (AJAX) javascript history NAVER D2 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 개발한 것 다른 프레임 워크와의 비교를 해보아야 결론이 날 것 같음! 리액트 이해 1. 오직 view만 신경쓰는 라이브러리 2. 초기 렌더링 render 함수가 이를 다룸, 뷰의 작동과 구성에대한 정보를 지닌 객체를 반환 → 최상위 컴포넌트의 렌더링 작업이 끝나면 html을 만들고 실제 DOM에 주입 3. 조화과정(..