프론트엔드 라이브러리, React!

페이지 단위의 DOM 개발을 다뤘다면, React는 컴포넌트 단위로 나누어 생각하고 개발한다.

Prerequisite(전제조건)

• HTML / CSS 기초
• Javascript 기초
• 함수형 프로그래밍과 고차함수 개념에 대한 이해
• 배열 내장 메소드 기초
• ES6문법에 대한 이해

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 - Achivement Goals

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

부족한 것 같아서 복습해야 할 내용들

• HTML, CSS기초
• 함수형 프로그래밍 과 고차함수
• ES6 문법
• 이벤트 핸들러 함수

리액트의 3가지 특징

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

선언형(declarative)
리액트는 한 페이지를 보여주기 위해 html/css/js로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 jsx를 확용한 선언형 프로그래밍을 지향한다. 

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

범용성 (learn once, write anywhere)
리액트는 javascript 프로젝트 어디에든 유연하게 적용될 수 있다. facebook 에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능하다. 

JSX란 무엇인가?

JSX는 Javascript XML의 줄임말로 , 문자열도 아니고 HTML도 아니다.
react에서 UI를 구성할때 사용하는 문법으로 javascript를 확장한 문법이다. 이 문법을 이용해서 react element를 만들 수 있다.

JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니다. 그렇다면 어떻게 해야 할까? 바로 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 한다.
이때 이용하는 것이 바로 “Babel”이다. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일한다. 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있다.

DOM 그리고 React JSX

React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있다. 즉, 컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄어들었고, 한 눈에 컴포넌트를 확인할 수 있게 되었다.
JSX를 사용하면 JavaScript만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있게 되는 것이다!

`주의할 점은 JSX은 HTML처럼 생겼지만, HTML이 아니기 때문에 앞서 언급했던 “Babel”을 이용한 컴파일 과정이 필요하다`

왜 JSX를 써야 할까?

DOM에서 JavaScript와 함께 사용하기 위해서는 JavaScript와 HTML을 연결하기 위한 작업이 필요하다.
Inline 방식이나 script 태그를 이용하여 외부 JavaScript 파일을 연결할 수도 있다. (혹은 내부에 넣을 수도 있다..)
하지만 React에서는 JSX를 이용해서 앞서 보았던 DOM 코드보다 명시적으로 코드를 작성할 수 있다.
JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한 눈에 확인할 수 있다. 두 마리 토끼를 한 번에 잡을 수 있다.
이렇게 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 한다.

JSX없이 React를 쓸 수 있을까?

하지만 여기서 궁금증이 생긴다.
JSX 없이는 React 요소를 만들 수 없는 걸까?
물론 JSX 없이도 React 요소를 만들 수 있지만, 코드가 복잡하고, 가독성이 떨어지는 단점이 있다.
JSX를 사용함으로써 코드를 이해하기 쉬워진다.
Babel이 알아서 이 JSX 코드를 변환해주니 편리하게 이용할 수 있다.

JSX규칙

주요 문법에 대해서 알아보자

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

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

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

• React에서 CSS class 속성을 지정하려면
  "className"으로 표기해야한다.
  만약 class로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의해야 한다..

3. JavaScript 표현식 사용 시 , 중괄호 {} 이용해야한다.

• JSX에서 JavaScript를 쓰고자 한다면 , 꼭 중괄호를 이용해야 한다. 중괄호를 사용하지 않으면 일반 텍스트로 인식한다

4. 사용자 정의 컴포넌트를 대문자로 시작 (PascalCase)

• React 엘리먼트나 JSX로 작성되면 "대문자"로 시작해야한다. 소문자로 시작하게 되면 일반적인 HTML엘리먼트로 인식을 하게 된다. 이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자정의 컴포넌트라고 부른다.

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

• 조건부 렌더링은 if문이 아닌 삼항 연산자를 이용해야 한다.

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

• React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용한다.
  map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 한다.
  "key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다.

  map을 이용한 반복 Hands-on

고차함수 map쉽게 이해하기 에서 배웠던 배열 메소드 map의 특성

• 배열의 각 요소를

• 특정 논리(함수)에 의해

• 다른요소로 지정(map)한다

const datas = [
  { id : 1, title : 'Hello World', content : 'Wecome to learning React!' },
  { id : 2, title : 'Installation', content : 'You can install React via npm.' },
  { id : 3, title : 'reusable component', content : 'render easy with reusable component.' },
  // ...
  { id : 100, title : 'I just got hired!', content : 'OMG!' },
];

function Blog() {
  return (
    <div>
      <div>
         <h3>{datas[0].title}</h3>
         <p>{datas[0].content}</p>
     </div>
      <div>
         <h3>{datas[1].title}</h3>
         <p>{datas[1].content}</p>
      </div>
      {// ...}
      <div>
         <h3>{datas[99].title}</h3>
         <p>{datas[99].content}</p>
      </div>
     {// ... 98 * 4 more lines !!}
   </div>
  );
}

[코드] 데이터가 100개 이상일 때

현재 datas의 요소는 id, title, content로 나누어져있다. 이 정보를 브라우저에서 react로 보여주려면 여러 HTML 엘리먼트에 이 데이터를 적절히 넣어야한다. 단순한 문자열에 불과한 datas의 요소를 HTML 엘리먼트로 이 정보의 구조를 잘 짜 놓은 모습으로 mapping하면 되겠다.
이에 대한 수도코드는?

배열의 각 요소를 (datas) 특정 논리(함수) (dataToPost함수)에 의해 다른요소로 지정 (map)한다.

React에서 이 수도코드를 아래와 같이 적으면
반복적으로 작성해야하는 부분만 골라서 배열의 요소로 넣으면 React가 이를 인지하고 모든 요소를 렌더링 한다. 그래서 편리한 것이다. 앞으로 배울 컴포넌트를 재사용성 있게 만들면 단순 반복되는 코드를 간결하게 작성할 수 있다.

function Blog() {
const dataToPost = (data) => (
  <div>
    <h3>{data.title}</h3>
    <p>{data.content}</p>
  </div>
);

const blogs = datas.map(dataToPost);

return (
  <div className="post-wrapper">{blogs}</div> 
);
}

[코드] 배열 메소드 map활용

return문 안에서 map 메소드를 사용 할 수 있는가?

가능하다.

• JSX를 사용하면 중괄호 안에 있는 모든 표현식을 사용할 수 있기 때문에 map메소드의 결과를 return문 안에 인라인으로 처리할 수 있다. 코드 가독성을 위해 변수로 추출할지 인라인에 넣을지는 개발자가 판단해야 할 몫이다.
  • 그러면 아까 'parkhacker' 이름만 보라색으로 적용할 때 const 변수 선언문은 리턴문 안에 넣어도 되는 것인가?

키 속성

React에서 map메소드 사용 시 , key 속성을 넣지 않으면 아래와 같이 리스트의 각 항목에 key를 넣어야 한다는 경고가 뜬다. key 속성의 위치는 map메소드 내부에 있는 즉 , 첫 엘리먼트에 넣어야한다.

• 무슨말인지 모르겠다. react에서 map메소드를 사용할때 key속성을 map 메소드 안에 첫 엘리먼트에 넣어야한다 라고 기억하면 되는것인가?

키 속성 값이 반드시 id가 되어야 하는가? id가 존재하지 않으면 어떻게 해야 하는가?

key속성 값은 가능하면 데이터에서 제공하는 id를 할당해야 한다. key속성 값은 id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야하기 때문이다. 정 고유한 id가 없는 경우에만 배열의 인덱스를 넣어서 해결할 수 있다. 배열 인덱스는 최후의 수단 ( as a last resort)으로만 사용한다.

function Blog() {
// dataToPost라는 함수로 나누지 않고 아래와 같이 써도 무방합니다.
const blogs = datas.map((data) =>
 <div key={data.id}> 
  <h3>{data.title}</h3>
   <p>{data.content}</p>
 </div>
);
return (
  <div className="post-wrapper">{blogs}</div>
);
}

[코드] 바른 key 속성값의 할당의 예

React map메소드 활용하기 글을 확인해보면 내가 했던 질문들이 있다.

React의 3가지 특징 중 두번째 컴포넌트(Component) 기반 개발

1. 정의

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

• UI를 구성하는 필수 요소

• 컴포넌트는 리액트의 심장이다

2. 리액트를 이용하면?

• 컴포넌트를 여러개 만들고 조합하면 어플리케이션을 만들 수 있다.

• 제시된 정의는 모두 맞다. 리액트를 이용하면 , 각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 이러한 컴포넌트를 여러개 만들고 조합하여 어플리케이션을 만들 수 있다.

3. 계층적 구조 (hierarchy) 를 트리구조로 형상화

• 리액트 어플리케이션은 컴포넌트들의 관계를 트리 구조로 형상화하여 표현할 수 있다.

• 모든 리액트 어플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 어플리케이션 내부적으로는 근원(root)이 되는 역할을 한다.

• 최상위 컴포넌트는 근원의 역할을 하기 때문에 다른 자식 컴포넌트를 가질 수 있다. 이 계층적 구조를 트리구조로 형상화 할 수 있다.

4. 한 가지 예시

• 유튜브 개발자라고 상상해보고, 컴포넌트 단위로 나누어보자

• 상단의 헤더 <Header />

• 그리고 화면 중앙의 컨텐츠 리스트. <ContentList/>이렇게 나눈 컴포넌트를 트리구조로 표현하면?

• 먼저 근원이 되는 root컴포넌트가 있고 , 그 아래 위에서 말한 헤더<Header />, 콘텐츠 리스트<ContentList/>가 있다. 헤더<Header />는 자신의 아래에 search , setting같은 자식 컴포넌트를 .. 콘텐츠리스트<ContentList/> 는 각각의 영상 콘텐츠들을 자식 컴포넌트로 가실 수 있다. 이러한 트리 구조에서 보듯이 각각의 컴포넌트는 각자 고유의 기능을 가지고 있으면서 UI의 한부분을 담당하고 있다. 이렇게 독립적인 컴포넌트들을 여러 개 만들고 한 데 모아서 복잡한 UI를 구성할 수도있고, 최종적으로는 복잡한 어플리케이션도 만들 수 있다.

• HTML, CSS, Javascript에 대해 공부했다. 이 세 가지를 이용해도 충분히 웹 어플리케이션을 만들 수 있다. HTML로 구조를 만들고 , CSS로 스타일을 더하며, Javascript가 DOM을 조작하여 HTML과 CSS가 만들어낸 구성요소들을 보다 interactive하게 만들어 준다. 하지만 이 세가지로 만족하기에는 아쉽다.

• 다시 예시로 돌아가서, 만약 UI를 개편하고자 기존의 헤더를 화면 왼쪽으로 옮겨 사이드바로 만드려 하면.. 헤더를 사이드바로 변경하기 위해서 무얼해야할까?
  • 먼저 HTML을 수정해서 구조를 바꾸고 , 화면의 상단에 맞추어 작성되어있던 스타일 속성을 왼쪽 화면에 맞게 수정해야 한다. 변경된 구조와 스타일에 맞추어 Javascript가 DOM을 조작하게끔 수정해주는 것 역시 필요하다.

• 만약 리액트를 이용하여 컴포넌트 기반으로 만들었다면, 컴포넌트는 각자의 기능을 가지고 있으며, UI의 한 부분을 맡고 있다고 했듯이, 원하는 수정사항이 생겼을 때 그에 맞게 기존 컴포넌트의 위치만 수정해주면 된다. 이것이 컴포넌트 기반 개발의 장점이다.