React

JSX란 javascript를 확장한 문법으로써 React element를 생성하기 위해 사용됨.기본적으로 React element에는 HTML 태그가 포함되어 있고 문자열도 포함되어 있음.JSX이 중괄호 안에는 유효한 모든 javascript 표현식을 넣을 수 있음J

브라우저 DOM element와 달리 React element는 일반 객체이며 ReactDOM은 React elemnet와 일치하도록 DOM을 업데이트함. 모든 elements를 ReactDOM에서 관리하기 때문에 루트DOM 노드라고 부름.React element는 불

Component는 UI가 어떻게 보여야하는지 정의하는 React element를 output으로 하는 함수. 함수형과 클래스로 정의할 수 있음.React가 사용자 정의 컴포넌트로 작성한 element를 발견하면 JSX attribute와 자식을 해당 Component

클래스형 컴포넌트에서는 render() 메서드가 있어야한다. render() 메서드에서 렌더링하고 싶은 JSX를 반환한다. defaultProps를 사용하여 props의 default 값을 설정한다.this 키워드를 사용하려면 생성자 함수 안에 super(props)를

React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시적으로 호출해야한다.DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요가 없다. 대신, 엘리먼트가 처음 렌더링될 때

어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없다. 이러한 컴포넌트에서는 childeren prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달한다.흔하지 않지만 컴포넌트에 여러 개의 구멍이 필요할 수도 있습니다. 이런 경우에는 children 대

React의 클래스형 컴포넌트는 재사용 가능한 행동을 붙이기 위해서 render props와 HOC와 같은 패턴을 사용해왔다. 하지만 이런 패턴을 사용할 때 컴포넌트를 재구성해야 하며 코드를 추적하기 어렵게한다. Hook은 계층 변화 없이 상태관련 로직을 재

컴포넌트는 React에서 코드의 재사용성을 위해 사용하는 주요 단위입니다. 하지만 컴포넌트에서 캡슐화된 상태나 동작을 같은 상태를 가진 다른 컴포넌트와 공유하는 방법이 항상 명확하지 않다.컴포넌트 안에서 사용된 행위를 다른 컴포넌트에서 재사용하려면 render prop

자바스크립트의 6가지 타입 중 객체를 제외한 원시 값들은 참조 값이 아닌 값 자체를 새로 할당한다. 따라서 값이 변경되면 서로 다른 값을 가지게 된다.반면 참조 타입인 객체는 하나의 값이 변경되면 다란 하나의 값도 동일하게 변경된다. 또한, 참조 타입은 동일 참조 값이

컴포넌트를 작성하다 DOM을 직접 다루어야 하는 경우나 렌더링 이후 업데이트 된 상태를 바로 조회해야할 경우 useRef를 사용한다.이 변수를 사용하여 다음과 같은 값을 관리한다.setTimeout, setInterval을 통해서 만들어진 id외부 라이브러리를 사용하여

주로 어플리케이션에서 전역적으로 데이터가 사용되야 할 때 사용한다. 여러 컴포넌트를 거쳐서 값을 전달하는 것이 아니라 Context를 통해서 원하는 값이나 함수를 전달할 수 있따.Context는 createContext 함수를 사용해서 만들며, 함수를 호출하면 Prov

상위 컴포넌트로부터 하위 컴포넌트까지의 상태값의 효율적인 전달을 위해서 Context Api를 사용한다. 하지만 앱의 규모가 커지면 커질수록 컴포넌트의 개수와 데이터 개수가 늘어남에 따라 코드도 복잡해지고 길어진다. 이를 해결하기 위해 상태값을 중앙화 시켜 유지관리하기

기존 방식으로 Redux를 사용하는 경우 mapStateToProps를 이용해서 props내 state를 정의하고, connect를 이용해서 props를 바인딩하는 복잡한 행동을 해야한다.하지만 react-redux의 useSelector와 useDispatch라는 h

React 컴포넌트의 state를 변경해야 할 땐, 무조건 불변성을 유지해야한다.업데이트 하는 과정에서 기존의 객체의 값을 직접 수정하면 안된다.객체 구조가 깊어질수록 불변성을 유지하면서 수정하기가 어렵다.immer는 불변성을 유지해주는 라이브러리입니다. produce

Redux-Saga는 비동기 데이터처리, 에러 핸들링 과 테스트를 좀 더 쉽고 효율적으로 관리하기 위해 사용되는 Redux middleware이다.https://redux-saga.js.org/logo/0800/Redux-Saga-Logo-Landscape.p

call을 이용해서 비동기함수를 호출한다면 동기적으로 함수가 종료되고 반환할 때까지 기다려야한다. 하지만 호출 중간에 우발적으로 일어나는 다른 액션 또한 동작하기를 원한다면 fork을 이용해야한다.결합되어있는 fork들의 부모는 결합된 모든 fork들이 종료 된 뒤에