React

리액트 리액트란? 프론트엔드 개발을 위한 자바스크립트 라이브러리 리액트의 3가지 특징 선언형(Declarative) JSX를 활용한 선언형 프로그래밍. 컴포넌트 기반(Component-Based) 범용성(Learn Once, Write Anywhere) JSX란

전통적인 웹 사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 HTML 파일로 된 전체 페이지 를 불러왔다.웹 사이트가 보다 복잡해지고 다양한 형태를 가지게 되면서 사용자와 많은 상호작용이 일어나게 되었고, 전체 페이지를 불

State & Props State(상태) 살면서 변할 수 있는 값 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값 Props 외부로부터 전달받은 값 props 특징 컴포넌트의 속성(property) 의미. 부모 컴포넌트로부터 전달받은 값. 객체 형태 이다.

React에서 이벤트 핸들러 네이밍은 카멜 케이스(camelCase)로 사용JSX를 사용하여 이벤트 핸들러 함수를 전달<input> <textarea> <select> 등의 폼 엘리먼트는 사용자의 입력값을 제어할 때 사용.React 에서는 위처럼 변경될

학습목표✅React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다.

✅Side effect가 어떤 의미인지 알 수 있다.✅React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분) -> Side effect의 예를 들 수 있다.✅Effect Hook을 이용해 비동기 호출 및

✅ Component Driven Development(CDD)의 필요성과 이점에 대해서 이해한다.✅ 구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.✅ CSS 방법론들의 특징과 장단점을 이해한다.✅ Styled Components의 기본 사용법을 익

로컬 상태와 전역 상태의 차이점을 이해한다.전역 상태의 필요성을 이해한다.상태 관리 라이브러리의 필요성을 이해한다.

React에는 Virtual DOM이라고 하는 가상의 DOM 객체가 있다.이것은 DOM의 사본 같은 개념.React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용.

React Hooks는 React 16.8 버전부터 추가된 기능으로, 클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능Hook은 함수 컴포넌트에서 사용하는 메소드입

React는 SPA(Single-Page-Application)인데, 사용하지 않는 모든 컴포넌트까지 한 번에 불러오기 때문에 첫 화면이 렌더링 될때까지의 시간이 오래걸립니다. 그래서 사용하지 않는 컴포넌트는 나중에 불러오기 위해 코드 분할 개념을 도입했습니다.Reac