일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Modules
- 리액트
- 취준
- scope
- react.js
- Hooks
- Groo
- 개발일기
- 리액트를 다루는 기술
- 상태관리
- 환경오염
- closure
- react
- 코딩테스트
- excutionContext
- lexicalEnvironment
- 카카오페이
- mobx
- 함수 바인딩
- SSR
- Redux
- vanilla.js
- npm
- JavaScript
- Binding
- 취업준비
- state
- CSR
- useState
- 우아한테크러닝
- Today
- Total
목록전체 글 (33)
개발하자
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..