props는 읽기 전용입니다. 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안 됩니다. (리액트 공식문서 중) 리액트에서는 왜 props를 변경하지 못하게 하는 걸까? 리액트에서 컴포넌트는 다음과 같은 총 네 가지의 경우에 업데이트된다. props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때 기본적으로 리액트에서는 setState만을 사용하여 state를 변경하게 한다. 이는 상태가 변경될 때 리액트에게 리렌더링을 하라는 명령을 요청하기 위함이다. 즉, setState는 리액트에게 상태가 변경되었으니 리렌더링을 하라는 트리거이다. 하지만 props를 단순하게 할당연산자로 변경하는 경우 setS..
제어 컴포넌트(Controlled Component) React에 값이 완전히 제어되는 Input과 Form Element State를 값으로 넘기고 그 State을 다룰 수 있는 핸들러를 콜백으로 넘긴다. input의 값은 항상 React의 state 값과 동일하다. (신뢰 가능한 단일 출처 - Single source of truth) 비제어 컴포넌트(Uncontrolled Component) 전통적인 HTML처럼 DOM에 제어되는 Input Element 오직 사용자만 값과 상호작용 ref를 사용하여 직접 DOM의 값을 가져온다. 일반적으로 제어 컴포넌트의 사용이 권장된다. 제어 컴포넌트를 사용해야 다양한 interaction을 관리하기가 편리하기 때문이다. Controlled and uncontr..
JSX는 HTML 문법과 자바스크립트 문법이 결합된 문법이라고 볼 수 있다. JSX는 다음과 같은 특징을 가진다. React 엘리먼트(element) 생성 JavaScript를 확장한 문법 JSX는 React.createElement의 syntactic sugar이다. {isNew ? 'Nice to Meet you' : 'Hello'} 위의 JSX 코드를 babel로 실행하면 다음과 같이 변한다. // babel 실행 결과 React.createElement("div", { className: "greeting", color: getColor() }, isNew ? 'Nice to Meet you' : 'Hello'); } JSX에서 중괄호를 열면 자바스크립트의 표현식을 사용할 수 있다. 여기서 중요한..
리액트는 DOM을 직접 제어하는 방식이 아니라 중간에 가상의 Virtual DOM을 둔다. Virtual DOM은 실제 DOM의 구조와 비슷한, React 객체 트리다. 개발자는 직접 DOM을 제어하지 않고 Virtual DOM을 제어하고, React에서 적절하게 Virtual DOM을 DOM에 반영하는 작업을 하게 된다. DOM에 엘리먼트 렌더링하기 ReactDOM.render( React.createElement(App) , document.getElementById('root')); ReactDOM.render ReactDOM.render(element, container[, callback]) React 엘리먼트를 container DOM에 렌더링하고 컴포넌트에 대한 참조를 반환한다. React ..
1. 리액트의 동작원리 리액트는 DOM을 직접 제어하는 방식이 아니라 중간에 가상의 Virtual DOM을 둔다. Virtual DOM은 실제 DOM의 구조와 비슷한, React 객체 트리다. 개발자는 직접 DOM을 제어하지 않고 Virtual DOM을 제어하고, React에서 적절하게 Virtual DOM을 DOM에 반영하는 작업을 하게 된다. DOM에 엘리먼트 렌더링하기 ReactDOM.render( React.createElement(App) , document.getElementById('root')); ReactDOM.render ReactDOM.render(element, container[, callback]) React 엘리먼트를 container DOM에 렌더링하고 컴포넌트에 대한 참조를..
With. 지그 (@zigsong) 소요시간: 1시간 45분 Q1. 원시 타입과 참조 타입 데이터가 메모리에 할당되는 과정을 이야기해봐요. 원시 타입 데이터 참조 타입 데이터 Q2. 자바스크립트의 콜스택과 힙에는 각각 어떤 것들이 저장될까요? 그리고 자바스크립트는 왜 힙이라는 별도의 메모리 공간을 가질까요? 콜스택 원시타입 데이터가 저장된다. 실행 컨텍스트를 통해 변수 식별자 저장, 스코프 체인 및 this 관리, 코드 실행 순서 관리 등을 수행 메모리 힙 참조타입 데이터가 저장된다.[자바스크립트] 콜스택/메모리힙 구조, 데이터 저장/참조 원리 [자바스크립트] 메모리 구조, 원시타입 변수 생성 원리, 가비지컬렉터 힙을 왜 쓰는가? 참조 타입 데이터의 프로퍼티를 동적으로 변경하는 것이 가능하도록 하기 위함..
1. 바닐라 자바스크립트 SPA 이벤트 관리 방법 1-1. index.html에 모든 레이아웃을 집어넣고 display: none 속성을 준 뒤, 필요한 경우에 보여준다. 장점: 이벤트를 한번만 걸면 된다. 단점: 최초 로딩 시간이 길어진다. 사용자가 display: none 속성을 해제하여 내용을 확인할 수 있으므로 보안상 위험하다. App의 크기가 커질수록 index.html 관리가 힘들다. 1-2. App이 최초 실행될 때, 필요한 DOM을 모두 생성해놓은 뒤, 필요할 때마다 replaceChild로 DOM을 교체한다. 장점: 이벤트를 한번만 걸면 되고 component 별로 template 관리가 가능하다. 단점: 최초 로딩 시간이 길어진다. 1-3. 메인 컨테이너 이벤트 위임 장점: innerH..
내 질문에 대한 정리 Q1. 함수의 매개변수는 최대 몇개까지 두는 것이 이상적일까요? 만약 그 이상의 매개변수가 필요한 경우에는 어떤 식으로 해결하시는 편인가요? 매개변수가 많은 함수라면 이 함수가 하나의 동작만을 하고 있는 것인지 확인할 것 같다. 쪼갤 수 있다면 쪼갠다. 객체로 묶는 것도 좋다. 하지만 매개변수가 많지 않고 매개변수의 성격이 다르다면 객체로 묶는 것이 무조건 좋다고 할 수 없을 것 같다. 최근에는 코드 에디터가 함수 매개변수에 대한 힌트를 제공하기 때문에 꼭 객체로 묶을 필요는 없을 것 같다. Q2. 리액트에서 함수형 컴포넌트를 선언할 때, 함수 선언문과 함수 표현식으로 작성할 수 있는데 차이가 있을까요? 자바스크립트 함수 선언문과 함수 표현식의 차이만 존재하는 듯 하다. 리액트 공식..
- Total
- Today
- Yesterday
- 리액트 props
- 우아한테크코스
- 1463
- 브라우저 라우터
- props를 변경하지 않는 이유
- contentEditable focus
- 리액트 리스트 키
- 리액트 jsx
- 우테코
- 인사이트
- 해쉬 라우터
- 프론트
- 리액트 키
- 파이썬
- Browser Router
- 리액트 동작원리
- props를 변경하지 못하는 이유
- 백준
- 프론트엔드
- localhost https
- Hash Router
- mkcert
- 리액트 리스트 key
- Redux Thunk
- Python
- 리액트 리덕스
- 리덕스 썽크
- 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 |