리액트에 익숙한 사람이라면 반복되는 컴포넌트 혹은 엘리먼트에는 고유한 키 값이 필요함을 알고 있다. 동시에 키값으로 인덱스 값을 주는 것이 안티패턴이라는 사실도 알고 있다. 그렇다면 왜 키값으로 인덱스를 주는 것이 안티패턴일까? 재조정 (Reconciliation) – React A JavaScript library for building user interfaces ko.reactjs.org 리액트에서 Key는 리액트가 어떤 항목을 변경, 추가 또는 삭제할 때 트리를 매번 새로 그리는 것이 아니라 기존과 비교하여 효율적으로 트리를 변경할 수 있도록 돕는 역할이다. 이제 키 값이 왜 사용되는지는 알겠다. 그러면 왜 키 값으로 index가 아닌 고유한 값을 사용해야하는 것일까? 리액트 공식문서에 있는 co..
1. React Router의 Hash Router와 Browser Router 리액트 라우터에는 자주 사용되는 두 가지의 라우터가 있다. 바로 Hash Router와 Browser Router이다. 이전 2-2, 2-3 미션에는 Hash Router를 사용하였고 2-4 단계 미션에는 Browser Router를 사용하였다. 간단하게 두 라우터의 차이를 짚어보면 다음과 같다. Hash Router 주소에 해쉬(#)가 붙는다. 검색 엔진이 읽지 못한다. 별도의 서버 설정을 하지 않더라도 새로고침 시 오류가 발생하지 않는다. Browser Router History API를 사용한다. 별도의 서버 설정을 하지 않으면 새로고침 시 404 에러가 발생한다. Hash Router는 검색 엔진 최적화가 지원되지 않..
1. React Router의 Hash Router와 Browser Router 리액트 라우터에는 자주 사용되는 두 가지의 라우터가 있다. 바로 Hash Router와 Browser Router이다. 이전 2-2, 2-3 미션에는 Hash Router를 사용하였고 2-4 단계 미션에는 Browser Router를 사용하였다. 간단하게 두 라우터의 차이를 짚어보면 다음과 같다. Hash Router 주소에 해쉬(#)가 붙는다. 검색 엔진이 읽지 못한다. 별도의 서버 설정을 하지 않더라도 새로고침 시 오류가 발생하지 않는다. Browser Router History API를 사용한다. 별도의 서버 설정을 하지 않으면 새로고침 시 404 에러가 발생한다. Hash Router는 검색 엔진 최적화가 지원되지 않..
1. Redux / React Redux / Redux Thunk 1-1. Redux Redux는 전역 상태 관리를 위한 라이브러리이다. 기존에는 하나의 상태를 여러 곳에서 사용하기 위해서는 최상단의 부모 컴포넌트에서 자식 컴포넌트에게 Props로 상태를 전달해줘야했다. 만약 자식 컴포넌트가 부모 컴포넌트로부터 깊은 곳에 위치해있다면 중간에 상태를 사용하지 않는 컴포넌트에게도 Props를 전달해야하는 Prop drilling이 발생하게 된다. 리액트가 아무리 바닐라 자바스크립트보다 편하다고 해도 이렇게 수고스러운 작업이 반가울리 없다. 따라서 사람들은 모든 컴포넌트에서 전역으로 상태에 접근하기 위한 도구의 필요성을 느꼈고 여러 전역 상태 관리 라이브러리들이 등장하게 됐다. Redux 기본 개념 - 액션(..
with 크리스 (소요시간: 1시간) 워밍업 - 변수 네이밍 kettanaito/naming-cheatsheet 내 질문 Q1. 화살표 함수는 왜 프로토타입 객체를 가지지 않을까요? A. 화살표 함수는 contstructor를 가지지 않기 때문에 생성자 함수가 아니다. 프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다. 따라서 화살표 함수는 프로토타입 객체를 가지지 않는다. Q2. 왜 객체 전용 메서드들은 Object.someMethod(instance) 이런 식으로 써야할까요? instance.someMethod() 이런 식으로 사용할 수 있으면 편할텐데 말이죠 🤔 (ex. Array.forEach([1, 2]) (x) / [1, 2].forEach (o)) A. 어떤 생성자 함수이든 prot..
1. Redux / React Redux / Redux Thunk 1-1. Redux Redux는 전역 상태 관리를 위한 라이브러리이다. 기존에는 하나의 상태를 여러 곳에서 사용하기 위해서는 최상단의 부모 컴포넌트에서 자식 컴포넌트에게 Props로 상태를 전달해줘야했다. 만약 자식 컴포넌트가 부모 컴포넌트로부터 깊은 곳에 위치해있다면 중간에 상태를 사용하지 않는 컴포넌트에게도 Props를 전달해야하는 Prop drilling이 발생하게 된다. 리액트가 아무리 바닐라 자바스크립트보다 편하다고 해도 이렇게 수고스러운 작업이 반가울리 없다. 따라서 사람들은 모든 컴포넌트에서 전역으로 상태에 접근하기 위한 도구의 필요성을 느꼈고 여러 전역 상태 관리 라이브러리들이 등장하게 됐다. 처음 리덕스를 배우는 입장에서 ..
- Total
- Today
- Yesterday
- 1463
- 브라우저 라우터
- 프론트
- 리액트 jsx
- 리액트 동작원리
- contentEditable focus
- localhost https
- Python
- Browser Router
- mkcert
- 댓글 모듈
- 프론트엔드
- 백준
- 리덕스 썽크
- 리액트 리덕스
- Hash Router
- 리액트 props
- 리액트 키
- Redux Thunk
- 파이썬
- 다라쓰
- 우아한테크코스
- 우테코
- 리액트 리스트 키
- props를 변경하지 못하는 이유
- 해쉬 라우터
- 인사이트
- 리액트 리스트 key
- props를 변경하지 않는 이유
- React key
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |