Yung_Developer

리액트에 익숙한 사람이라면 반복되는 컴포넌트 혹은 엘리먼트에는 고유한 키 값이 필요함을 알고 있다. 동시에 키값으로 인덱스 값을 주는 것이 안티패턴이라는 사실도 알고 있다. 그렇다면 왜 키값으로 인덱스를 주는 것이 안티패턴일까? 재조정 (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. Redux / React Redux / Redux Thunk 1-1. Redux Redux는 전역 상태 관리를 위한 라이브러리이다. 기존에는 하나의 상태를 여러 곳에서 사용하기 위해서는 최상단의 부모 컴포넌트에서 자식 컴포넌트에게 Props로 상태를 전달해줘야했다. 만약 자식 컴포넌트가 부모 컴포넌트로부터 깊은 곳에 위치해있다면 중간에 상태를 사용하지 않는 컴포넌트에게도 Props를 전달해야하는 Prop drilling이 발생하게 된다. 리액트가 아무리 바닐라 자바스크립트보다 편하다고 해도 이렇게 수고스러운 작업이 반가울리 없다. 따라서 사람들은 모든 컴포넌트에서 전역으로 상태에 접근하기 위한 도구의 필요성을 느꼈고 여러 전역 상태 관리 라이브러리들이 등장하게 됐다. Redux 기본 개념 - 액션(..

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 ..

npm install react-helmet 후 태그 안에 태그를 넣어 사용한다. 출처 https://www.it-swarm.dev/ko/javascript/reactjsx%EC%97%90-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%83%9C%EA%B7%B8-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0/823261729/