React

Achievement Goals

• React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.
• JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.
• React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.
• create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다.

React SPA

Achievement Goals

• SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다.
• SPA의 장, 단점에 대해 이해하고 설명할 수 있다.
• 와이어프레임을 보고 어느 부분을 컴포넌트로 구분해야 할 지 스스로 정할 수 있다.
• React에서 npm으로 React Router DOM을 설치(npm install react-router-dom)하고 이용할 수 있다.
• React Router DOM를 이용하여 SPA를 구현할 수 있다.
• 라우팅 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용할 수 있어야 한다.

React State & Props

Achievement Goals

• State, Props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.
• React 함수 컴포넌트(React Function Component)에서 State hook을 이용하여 State를 정의할 수 있다.
• React 컴포넌트(React Component)에 Props를 전달할 수 있다.
• 이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다.
• 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 State이고 Props에 적합한지 판단할 수 있다.
• 실제 웹 애플리케이션 개발 시 적합한 State와 Props의 위치를 스스로 정할 수 있다.
• React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다.

React의 3가지 특징

리액트는 선언형이고, 컴포넌트 기반이고 다양한 곳에서 활용할 수 있다는 특징이 있습니다.

 

선언형

 

리액트는 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향합니다.

 

컴포넌트 기반(Component-Based)

 

리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발합니다. 컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있습니다.

 

범용성(Learn Once, Write Anywhere)

 

리액트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있습니다. 

 

컴포넌트로 생각하기

 

컴포넌트란: 하나의 기능 구현을 위한 여러 종류의 코드 묶음이거나 UI를 구성하는 필수요소입니다. 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 합니다.