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에 렌더링하고 컴포넌트에 대한 참조를..
- Total
- Today
- Yesterday
- 리액트 키
- Browser Router
- 1463
- 리액트 props
- 프론트
- Hash Router
- 브라우저 라우터
- 우아한테크코스
- contentEditable focus
- 리덕스 썽크
- 댓글 모듈
- props를 변경하지 않는 이유
- 리액트 jsx
- props를 변경하지 못하는 이유
- 인사이트
- 백준
- 프론트엔드
- 리액트 리스트 key
- Python
- 해쉬 라우터
- React key
- localhost https
- 파이썬
- 리액트 리덕스
- 리액트 리스트 키
- Redux Thunk
- 다라쓰
- 리액트 동작원리
- 우테코
- mkcert
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |