What is React?

프론트엔드를 위한 JavaScript 오픈 소스 라이브러리

리액트의 3가지 특징

• Declarative(선언형)
  코드를 자세히 분석하지 않고도 의도를 분명히 알 수 있게 작성하는 방식
  하나의 파일에 명시적으로 작성할 수 있게 하는 JSX를 활용
• component-based(컴포넌트 기반)
  하나의 기능구현을 위해 여러 종류의 코드를 묶어둔 사용자 정의 태그(컴포넌트)
  컴포넌트로 분리하면 독립적으로 재사용 및 유지보수에 용이하다.
• Learn Once, Write Anywhere(범용성)
  JavaScript 프로젝트 어디서든 유연하게 적용가능

what is JSX?

JavaScript를 확장한 문법으로, React element를 만들 수 있다.
Babel이 브라우저가 이해할 수 있게 JavaScript로 번역해준다.
JSX !== HTML so need Babel to compile

개발자 도구 element에서 html으로 compile된 것을 확인할 수 있다.

JSX Rules

• 하나의 엘리먼트 안에 모든 엘리먼트
  여러 엘리먼트를 작성 시, 겉을 감싸는 부모 태그가 꼭 있어야 한다.
  can return only one single parent element!
  so the other components have to be inside of it.

• CSS class 속성(attribute)은 className
  class는 JavaScript 언어로 받아들인다.

• JavaScript 사용 시, 반드시 {} 중괄호
  리턴문 전에 변수를 이용해 작성한 JS를 리턴문에서 사용 시,
  중괄호가 없다면 text로 인식한다.

• 사용자 정의 컴포넌트는 대문자로 시작
  소문자는 HTML 엘리먼트로 인식한다.

• 조건부 렌더링 시 삼항연산자 사용 () ? :

• 여러 HTML 엘리먼트를 표시할 시 map함수 사용
  map함수 사용 시 내부 첫 엘리먼트에 key속성을 넣어야 한다.
  key의 속성값은 id

what is component?

JavaScript와 HTML을 연결하는 작업이 필요한 DOM과 달리,
React는 JSX를 통해 더욱 명시적으로 코드를 작성할 수 있다.
구조와 동작에 대한 코드를 한 뭉치로 적은 코드set을 컴포넌트라 한다.
(하나의 기능 구현을 위한 여러 종류의 코드 묶음)

리액트는 내부적으로 근원이 되는 최상위 컴포넌트(root)가 있다.

index.html (in public folder)

<div id="root"></div>

index.js
id가 'root'인 요소에 App 컴포넌트의 내용을 삽입한다는 뜻
(root 최상위 부모, 그 자식이 App!)
그렇다면 모든 컴포넌트가 App컴포넌트에 들어가야겠지?!
즉, App = 'root' component
🚫 every component must be in App component!
❗️ 부모 컴포넌트에 자식 컴포넌트를 import하여 써준다.

map함수를 이용한 list 반복

child in a list, should have a unique 'key' prop.
map은 배열의 각 요소를 특정 논리를 통해 다른 요소로 반환한다.
따라서, 이미 짜여진 틀에 데이터만 넣어 반복하기 위해 배열 메소드인 map사용

function Blog() {
  const postToElement = (post) => ( // 변수 추출방식
    <div>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  const blogs = posts.map(postToElement);
  return <div className="post-wrapper">{blogs}</div>;
}

function Blog() {
  const blogs = posts.map((post) => ( // Inline way
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div className="post-wrapper">{blogs}</div>;
}

What is SPA?

single page application
웹페이지 전체를 불러와야했던 전과 달리
업데이트에 필요한 데이터만 전달받아 해당 부분만 갱신하는 웹 어플리케이션 방식

SPA의 장점

• 사용자의 행동에 발빠른 반응
• 서버 과부하위험 감소
• 더 나은 유저경험

SPA의 단점

• JavaScript의 크기가 커 첫 페이지 로딩시간 증가
• HTML이 빈약해 검색 엔진 최적화 나쁨

What is React Router?

컴포넌트들끼리 보다 유기적으로 주고 받을 수 있도록 설계하기 위한 기능

npm install react-router-dom

Routing
주소에 따라 다른 뷰를 보여주는 과정. "경로에 따라 변경한다"

주요 컴포넌트

• BrowserRouter 길잡이 역할
• Switch 어떤 Route로 갈지 정해주는 역할
• Route 경로 안내
  path 속성으로 주소 기입
  중복되는 경로를 피하기 위해 exact속성 사용
• Link 경로 링크
  to 속성을 이용해서 path주소를 연결

import {BrowserRouter, Switch, Route, Link} from 'react-router-dom';

What is props?

component는 정적이라 그 가치가 떨어진다.
따라서 속성(attribute 즉,props)을 통해 component를 조작한다.
이를 통해 내용을 지정하고 간결하게 표현할 수 있다.
따라서 사용자에게 중요한 정보라 할 수 있다.

• 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 value값
• 외부(부모)로부터 전달받은 변하지 않는 값, 컴포넌트의 속성(property)
• 객체 형태 { key(attribute) : value }
• 함부로 변경될 수 없는 읽기 전용(read-only) 객체

How to use props

1. 부모(상위) 컴포넌트 태그에 속성을 정의하고,
   자식(하위) 컴포넌트로 전달하고자 하는 값(data)을 작성한다.

<tag attribute=value />

2. 자식 컴포넌트는 매개변수로 정의된 값(data)을 전달받는다.
   매개변수(props) 하나의 객체로써 여러 속성(key)을 한번에 통틀어 전달하는 방식
   매개변수({attribute1, attribute2, ..}) 비구조화해서 하나씩 서술하는 방식
3. 전달받은 props를 렌더링(return)한다.
   리턴문에서 값의 자리에 대입한다.
   매개변수(props) -> {props.attribute}
   매개변수({attribute}) -> {attribute} === value

React에서 JSX 속성 및 값을 할당하는 방법

<tag attribute={value} />

props.value = attribute
HTML에서 속성과 값을 할당하는 방법과 같지만, 전달하는 값을 중괄호 {}로 감싸주기

attribute없이 props 전달하는 법

<tag>value</tag>

props.children

What is state?

props 값에 따라, 내부 구현에 필요한 데이터.
컴포넌트 내에서 변할 수 있는 속성값, 즉 상태
state를 통해 component를 보다 복합적으로 다양한 일을 할 수 있도록 만든다.

state 를 다루는 방법

useState 사용법

1. useState를 이용하기 위해 React로부터 불러오기.

import { useState } from "react";

2. useState를 컴포넌트 안에서 호출하기. 즉, "state" 라는 변수를 선언하기

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

useState는 호출하면 배열을 반환한다!

state 갱신하기

1. state 변수를 갱신하는 함수 불러오기
2. 이벤트가 발생 시, 이벤트 핸들러 함수 작동! DOM

React의 이벤트 처리(이벤트 핸들링; Event handling) 방식

• React에서 이벤트는 카멜 케이스(camelCase) 사용
• JSX를 사용하여 함수로 이벤트 처리 함수(Event handler)를 전달

<태그 이벤트={이벤트 처리 함수 이름}></태그>

Event

🚫 () 쓰면 안된다! 함수를 호출하는 것이 아니다!
이벤트에 함수를 전달할 때는 호출해 결과값을 전달하는게 아닌 함수 자체를 전달해야 한다.

onChange

폼(Form) 엘리먼트는 사용자의 입력값을 제어하는데 사용되는데,
React에서는 변경될 수 있는 입력값을 컴포넌트의 state로 관리하고 업데이트한다.
event가 발생하면 event.target.value로 이벤트 객체에 담겨있는 input 값을 읽어올 수 있다.

onClick

사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트.
'button'이나 'a' tag로 링크 이동같이 주로 사용자의 행동에 따라 반응해야 할 때 이용

내가 내려줄 프롭스가 객체 모양일때 스프레드 문법을 써야한다.

<props (this.props.해당attribute)

component 파일별 분리
코드를 더 간결하게 볼 수 있고 쉽게 확인 가능
import component명 from "폴더 위치"
export default component명
state
사용자가 컴포넌트를 사용하는 입장에서 중요한 것이 props라면
그
좋은 component이기 위해서는
외부의 프롭스와 내부의 스테이트가 철저히 분리되어 있어야 한다.>