210811-13 CodeStates 18-20일차

3일동안 React에 대해서 공부했다.
이전까지 JavaScript를 공부할 때만 해도 다른 프로그래밍 언어와 비슷한 점들이 많아 공부에 크게 어려움이 없었지만 React는 처음으로 배우는 것이라 낯설고 어려웠다.
그래도 열심히 찾아보며 공부했고 코드스테이츠의 Section1이 끝나고 HA시험까지는 통과를 할 수 있었다.

React란?

React는 프론트엔드 개발을 위해 페이스북에서 만든 JavaScript오픈소스 라이브러리이다.

React의 3가지 특징

• 선언형
  기존에 공부했던 방법은 한 페이지를 보여주기 위해서 HTML/CSS/JS를 각자의 파일에 작성하였지만 리액트는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.

  JSX(JavaScript XML)
  React에서 UI를 구성할 때 사용되는 JavaScript를 확장한 문법이다.(JSX는 React Element를 생성한다.)
  JSX가 JavaScript를 확장한 문법이지만, 브라우저가 바로 실행할 수는 없다.
  Babel은 JSX를 브라우저가 이해할수 있는 JavaScript로 컴파일하는 역할을 담당한다.
  기존에는 웹페이지를 만들기위해 HTML/CSS/JS파일을 각각 작성했지만, React에서는 JSX와 CSS만을 이용해 JavaScript로 마크업형태의(HTML과 같은)코드를 작성하여 DOM에 배치하게된다.

• 컴포넌트 기반
  하나의 기능구현을 위해 여러종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
  하나의 기능을 위해 컴포넌트를 만든면 컴포넌트간 독립적인 역할을 하면서 재사용이 가능하기 때문에 생산성이 높아지고 유지보수가 용이하다는 장점이 있다.

• 범용성
  리액트는 JavaScript라이브러리이다.
  대표적인 프레임워크 Angular와는 다르게 JS를 이용한 프로젝트 어디에든 유연하게 적용할 수 있다.
  또한 리액트 네이티브를 이용해 모바일 개발도 가능하다.

  프레임워크와 라이브러리
  프레임워크: 뼈대나 기반구조를 뜻하고 제어의 역전개념이 적용된 대표적인 기술, 소프트웨어의 특정 문제를 해결하기 위해 상호협력하는 클래스와 인터페이스들의 집합이다.
  라이브러리: 단순 활용가능한 도구들의 집합
  
  
  프레임워크와 라이브러리의 차이점에 대해 블로그를 참고했지만 아직까진 어려운 개념이 많아 정확한 이해가 어렵다......

SPA(Single Page Application)

예전의 웹 사이트에서는 사용자가 웹 사이트내의 다른 페이지로 이동하게 되면 브라우저가 다른 페이지를 보여주기 위해 매번 새로운 웹서버로부터 새로운 HTML파일을 불러왔다.
시간이 지날수록 웹 사이트가 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서버간의 더욱 많은 상호작용이 일어나게 되었다.
상호작용으로 인해 페이지가 변화될 때 매번 페이지를 새로 로드하면서 Header, Navigation Bar와 같은 중복되는 요소들을 매번 불러오는 것은 서버의 불필요한 트래픽을 발생시킨다.(이는 속도,성능의 저하로 이어진다.)
SPA는 HTML문서 전체가 아닌, 웹페이지의 업데이트에 필요한 데이터만 서버에서 전달받아 데이터를 이용해 JavaScript가 동적으로 HTML요소를 생성해 화면에 보여주는 방식으로 개발된 웹 애플리케이션, Single Page Application의 약어이다.

React Router

SPA는 하나의 페이지를 가지고 있지만 한 종류의 화면만을 사용하지 않는다.
트위터와 같은 SPA의 경우, 하나의 페이지에서 메인화면,알림화면,마이페이지 화면등을 보여줘야할때, 화면 각각에 주소를 지정하여 주소에 따라 다른 뷰를 보여주는 방법을 생각할 수 있다.

이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다"라는 의미로 라우팅(Routing)이라고 한다.
하지만 React자체에는 이러한 기능이 존재하지 않는다.
React SPA를 개발할 때 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용한다.
React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있다.

• 라우터 역할을 하는 BrowserRouter
  BrowserRouter컴포넌트는 웹 애플리케이션에서 HTML5의 History API를 이용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 해준다.
  BrowserRouter컴포넌트가 상위에 작성되어있어야지만 나머지 React Router컴포넌트들을 사용할 수 있다.
• 경로를 매칭해주는 Switch와 Route
  Switch컴포넌트는 여러개의 Route컴포넌트들을 감싸서 경로가 일치하는 단 하나의 Route를 렌더링하는 역할을 한다.
  Switch를 사용하지 않으면 매칭되는 모든 요소들을 렌더링하게 된다.
  Route컴포넌트는 path속성을 지정하여 주소가 해당 path와 일치할 때 어떤 컴포넌트를 보여줄지 정하는 역할을 한다.(Route컴포넌트안에 React element를 작성)
• 경로를 변경해주는 Link
  Link컴포넌트는 경로를 연결해주는 역할을 한다.
  페이지를 새로 불러오지 않고 페이지의 주소만을 변경한다.

Props

컴포넌트의 속성(property)를 의미한다.
와부(상위컴포넌트)로부터 전달받은 값으로 변하지 않는 값이다.
React컴포넌트는 JavaScript의 함수 또는 클래스로, props를 전달인자(argument)처럼 전달받아 화면에 렌더링할 React Element를 반환한다.
상위컴포넌트에서 하위컴포넌트로 props를 전달할 때 props는 객체형태로 전달되며 어떤 타입의 값도 넣어서 전달할 수 있다.
props는 외부로부터 전달받아 변하지 않는 값이므로 변경될 수 없는 읽기전용(read-only)객체이다.

State

컴포넌트의 상태(state)를 의미한다.
함수 내에서 선언된 변수처럼 컴포넌트 내에서 관리된다.
React에서 state를 다루는 방법 중 하나로 useState라는 함수를 제공한다.

import { useState } from "react";

//useState사용법
//const [state명,state갱신함수명]=useState(state초기값)

//ex
const [isChecked,setIsChecked]=useState(false);

초기값을 false로 갖는 isChecked라는 state와 isChecked를 갱신하기 위한 setIsChecked함수를 선언했다.
선언된 isChecked라는 state는 변수처럼 JSX안에서 자유롭게 사용될 수 있다.
하지만 isChecked라는 state를 갱신하기 위해서는 값을 직접 재할당 하는 방법이 아닌 state갱신함수 setIsChecked를 사용해야만 한다.

//isChecked를 true로 바꾸고 싶을 때
ischecked=true  //X
setIsChecked(true)  //O

갱신함수를 이용해 state를 변경해야 state를 변경하고 변경된 state를 반영하기 위해 해당 컴포넌트를 리렌더링을 할 수 있다.