TIL 210811 - 기초 React

리액트는 vue.js와 동일한 자바스크립트 라이브러리이다.

그냥 자바스크립트 소스를 좀 더 편하게 구현할 수 있게 도와주는 함수들의 집합

 

 

뭐 이리 많노?

React Intro

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)에 대해 자신의 언어로 설명할 수 있다.

 

리액트 특징 - 선언형, 컴포넌트 기반, 범용성

 

 

이제 진짜 시작!

 

JSX 개념

 

Achievement Goals

• React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.
• JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.
• React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.

 

오 못보던 게 눈에 띄네. JSX

리액트에서 사용되는 JS문법(js xml)

JS확장버전이라고 하는 거 보니

기존 JS 문법에 추가한 요소들이 있을 것으로 예상.

 

but jsx는 자바스크립트 코드가 아니기 때문에

babel로 번역을 해서 브라우저에서 읽어주어야 한다.

babel이 컴파일러(번역기)

 

랜더링이란 HTML,CSS,JavaScript 등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정

 

함수 작동시키고 리턴값 바고 h1태그로 감싸서 브라우저로 띄워주었다.

JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인 가능

구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트

 

 

App.js 파일에서 html과 js 파일의 활동을 모두 처리하고 있다.

 

 

JSX활용

규칙

1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함

JSX에서 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 감싸주어야 합니다.

 

2. 엘리먼트 클래스 사용시 className으로 표기

class로 작성하게 되면 jsx는 js의 class로 인식

 

3. js시 사용시 { } 중괄호 이용

 

4. 사용자 정의 컴포넌트는 대문자로 시작

5. 조건부 렌더링시 삼항연산자 사용

 

6. 여러개의 HTML 엘리먼트 표시할 때 map( ) 함수 이용

map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야한다.

 

 

map을 이용한 반복 Hands-on

- 해보았는데 잘 안된다. ㅎㅎ

 

 

 

Component

컴포넌트

: 하나의 기능 구현을 위한 여러 종류의 코드 묶음

모든 리액트 앱은 최소 한개의 컴포넌트를 가지고 있다.

이 한개의 컴포넌트를 내부적으로 root 역할을 하고

root 아래에 계층적으로 자식 컴포넌트를 가질 수 있다.

 

Header, ContentsList,

핵심은 앱을 계층적 혹은 트리적 구조로 인식, 기획하기

 

기능, 스타일, 구조 3가지 요소

 

 

 

Create React App

Achievement Goals

• Create React App 소개를 보고, Create React App 이 무엇인지 대략적으로 이해할 수 있다.
• npx create-react-app 으로 새로운 리액트 프로젝트를 시작할 수 있다.
• create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다.
• 리액트 랜덤 명언 앱 Hands-on을 따라 간단한 리액트 랜덤 명언 앱을 만들 수 있다.
• Create React App으로 만들어진 리액트 프로젝트 구성을 대략적으로 이해할 수 있다.

 

 

Introduction

이번 React Twittler Intro 스프린트에서는 유명 SNS 서비스인 Twitter와 유사한 Twittler를 React로 개발합니다. 앞으로 있을 React Twittler Router, React Twittler State Props 스프린트 통과를 위해서 JSX 기본 문법을 숙지하고, 컴포넌트 기반 개발을 처음으로 시작하는 단계입니다.

Achievement Goals

• 리액트, JSX 기본 문법을 익힌다.
• 리액트, JSX로 트위틀러를 하드 코딩할 수 있다.
• 컴포넌트를 먼저 개발하는 Bottom-up 개발 방식에 익숙해진다.
• npm script로 리액트 개발에 필요한 기본적인 툴을 사용할 수 있다.