React

JSX는 리액트 문법으로 React요소를 만들고 DOM에 렌더링 시켜서 그립니다.자바스크립트 안에 html태그같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있습니다.태그 닫기무조건 1개의 엘리먼트를 반환하기 JSX에서 javascript를 가져올때 중괄호 사용 {

가상돔이란 - DOM 트리중 하나만 수정되어도 DOM 트리 전체를 수정해야 하는데 이경우 필요없는 연산이 많이 일어남으로 보다 효율적인 렌더트리를 동작시키기 위해 등장한 개념이 가상돔입니다. 가상돔의 동작방식은 \`기존 DOM과 어떤 행동 후 새로 그린 DOM(가상돔)

Component는 쉽게 생각하면 레고로 생각할 수 있습니다 각 레고블럭 (component)들을 합쳐 한 페이지를 그릴 수 있습니다.header, container, footer의 세 개의 컴포넌트를 합쳐 한 페이지를 보여줄 수 있습니다. Component에서 데이

컴포넌트 스타일링 기법중 하나로서 class 이름 짓기 해방, 컴포넌트에 스타일을 적기때문에 직관적인 장점을 가지고 있습니다.yarn add styled-components공통적으로 사용하는 style 같은경우 styled 컴포넌트로 만들어 속성값만 바꿔서 사용하면 좋

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.DOM 엘리먼트에서 Ref 사용하기 컴포넌트가 마운트 될 때 React는 currnet 프로퍼티에 DOM 엘리먼트를 대입하고, 컴포넌트의 마운트가 해제될 때 curre

이벤트 리스너는 \`사용자가 어떠한 행동(이벤트)을 하는지 아닌지 지켜보다 알려주는 것입니다. ex) 마우스 클릭 , 마우스 오버, 키보드 조작 등 DOM 요소가 있어야 이벤트 발생을 지켜볼 수 있음으로 componentDidMount()에 이벤트 리스너를 넣어줍니다.

라우팅이란 html이 딱 하나를 가지고있는 SPA(Single Page Application)에서 주소창대로 다른 페이지를 보여줄 수 있는 방법으로 다른 페이지를 보여주는 걸 라우팅 이라고 부릅니다.yarn add react-router-dom/cat 과 /dog 에

리덕스는 데이터를 한 군데 몰아넣고, 여기저기서 꺼내볼 수 있게 하는 상태관리를 보다 편하게 관리할 수 있게 제공하는 라이브러리입니다.자식 컴포넌트는 부모 컴포넌트의 state를 맘대로 조작할 수 없습니다 데이터는 부모에서 자식으로 단방향으로 흐리기 때문이입니다.만약

React의 컴포넌트 종류는 두가지가 있습니다. 클래스형, 함수형React 버전 16.8이후 HOOK기능이 추가되어 클래스형 컴포넌트에서만 사용할 수 있었던 state, lifecycle를 함수형 컴포넌트에서도 관리가 가능하게되었습니다.클래스 컴포넌트는 class키워드