아주아주 중요하고!
아주아주 어렵지만!
아주아주 재미있는?
React를 학습해보자!

React

React란 무엇인가??
React는, 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다.
현재 웹 애플리케이션 개발 프로그램중에 가장 핫하다.
이 React는 3가지 특징이 있다.

1. 선언형이다.
코드를 자세히 설명하거나 들여다보지 않아도
코드의 의미와 용도를 분명하게 알 수 있다.

2. 컴포넌트 기반이다.
하나의 기능 구현을 위해 여러 종류의 코드를 묶었다.
독립적이고, 재사용이 가능해서 기능 자체에 집중하여 개발할 수 있다.
리액트의 심장이라고도 할 수 있다

위 그림처럼, 코드의 뭉치인 'Component' 가 모여서 애플리케이션을 구성한다.
모든 React 애플리케이션은 '최소 한개의 컴포넌트' 를 가지고 있다.
이 컴포넌트는 내부적으로 근원(root)이 되고,
이 근원(root), 최상위 컴포넌트는 다른 자식 컴포넌트를 가질 수 있고,
그렇기에 아래 그림처럼 트리 구조로 형상화할 수 있다.

컴포넌트 개발의 장점은 편하다는 것인데,
HTML, CSS, JS로 웹 애플리케이션을 만들었을 때
모양을 바꾸기 위해서는 HTML로 구조를 바꾸고,
CSS를 수정하고, 변경된 구조와 디자인에 맞춰서
DOM 조작 로직을 수정해야하지만,
컴포넌트 개발은 변경하려는 UI에 맞춰서 컴포넌트의
위치만 수정하면 된다.

3. 범용성이다.
React를 적용하지 않았던 기존 프로젝트에서도 유연하게 사용할 수 있고,
React Native로 어플 개발도 가능한 등 여러가지로 범용성이다.

JSX (Javascript XML)

JSX란, UI를 구성할 때 사용하는 문법으로,
JavaScript를 확장한 문법이다.
이 JSX는 문자열도 아니며, HTML도 아니다.
때문에 브라우저가 바로 실행할 수 없고,
'Babel'로 브라우저가 이해할 수 있는 JavaScript로 컴파일한다.
React에서는 CSS, JSX만으로 웹 애플리케이션을 개발할 수 있다.
JS문법과 HTML문법을 동시에 사용할 수 있기 때문에
기능과 구조를 한눈에 확인이 가능하다.
이렇게 기능과 구조를 한 뭉치로 적은 코드셋을 컴포넌트라고 한다.

JSX에서 여러 엘리먼트를 작성하고자 하는 경우
-> Opening tag와 Closing tag로 감싸준다.

CSS의 class속성을 지정하려면?
-> 기존처럼 'class'가 아닌, 'className'으로 지정한다.
(class로 지정하면, JavaScript 클래스로 받아들이니 주의한다.)

JavaScript 문법을 사용하고자 한다면?
-> 꼭! 중괄호를 사용한다. (ex. 변수 arr은 {arr}로 표기)
중괄호를 사용하지 않으면 일반 텍스트로 인식한다.

JSX로 작성할 땐 항상 대문자로 시작해야한다.
-> 소문자로 시작하면 HTML 엘리먼트로 인식한다.
(이렇게 대문자로 작성된 JSX 컴포넌트를 사용자 정의 컴포넌트라고 한다)

조건부 렌더링
-> if문이 아닌, 삼항연산자를 사용한다.

  <div>
    {
    (1 + 1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
    }
  </div>
// 1+1이 2일때 (?) -> return (<p>정답</p>), 
// 아닐때 (:) -> return (<p>탈락</p>)

여러개의 HTML 엘리먼트를 표시할 때
-> map() 함수를 이용한다.
이때 반드시 'key' JSX속성을 넣어야한다.
넣지 않으면 key를 넣어야 한다는 경고가 표시된다.

  const posts = [
    { id: 1, title: 'hi', content: 'good' },
    { id: 2, title: 'bye', content: 'hoho' }
    ... 기타 등등 객체 쭈우욱
    ];

  const postToJSX = (obj) => {
    return (
      <div key = {obj.id}>  // key 속성을 {obj.id}로 넣어준다.
        <h3>{obj.title}</h3>
        <p>{obj.content}</p>
      </div>
    );
   };

(위 코드는 key 속성을 넣는 예시이므로 작동되지 않는 코드다)

JSX의 return문
-> JSX의 리턴문은 소괄호 '()' 를 적용해준다.
ex. return ( 내용 )
또한, 큰 태그가 하나만 사용되어야 한다.

  <div>안녕하세요</div>
  <div>반갑습니다</div>

위의 방법이 아닌,

  <div>
    <div>안녕하세요</div>
    <div>반갑습니다</div>
  </div>

위의 방법처럼 큰 태그는 하나, 내용을 추가하고싶으면
그 태그 안에 새로운 태그들을 추가한다.