[React] React 기초 I

Introduction

드디어 Rect를 배우게 되었다. 스케줄을 보니 React 기토에 대해 만 거의 2주 동안 배우는 것 같다.

React를 학습하기 전 먼저 선행되어있어야 할 지식은 아래와 같다.

Prerequisite

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

Achievement Goals

• React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.
• JSC가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.
• React Compoment의 필요성에 대해서 이해하고, 설명할 수 있다.
• create-react-app으로 간단한 개발용 React 앱을 실행할 수 있다.

React 란??

• 프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리이다. UI를 설계하는데 집중한 라이브러리이다.
• React는 1) 선언형 2) 컴포넌트 기반 3) 범용형 (다양한 곳에서 활용이 가능) 이 세 가지 중요 특징으로 프론트앤드 개발을 더 효과적으로 하게 해 준다.
  • 선언형 (Declarative) : 명시적이란 코드를 자세히 분석하지 않아도 코드의 목적, 의도를 분명히 알 수 있게 작성하는 방식
  • React는 함 페이지를 보여주기 위해 HRML, CSS, JavaScript로 나눠서 작성하자 않고 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그햄을 지향한다.
  • 그러므로 코드만 보고도 실제 어플리케이션의 기능을 파악할 수 있다.
• React는 컴포넌트 기반 (Component-Based)으로 개발을 한다. 컴포넌트로 분리하므로 서로 독립적이고, 재사용이 가능하기 때문에 기능 자체에 집중하여 개발할 수 있다. ( 정보처리기사 공부를 하면서 배웠던 컴포넌트, 재사용에 대해 이번 주말에 따로 정리를 해보겠다 )
  • 컴포넌트는 하나의 기능을 구현하기 위하여 여러 종류의 코드를 묶어놓은 것을 말한다
    예를 들어, 회원가입 기능을 하나의 컴포넌트로, 장바구니 기능을 하는 것을 또 하나의 컴포넌트로 구현해 놓은 것을 예로 들 수 있다.
    또한 장바구니 내에서도 전체 선택 체크박스는 제품을 전체 선택한다는 기능을 수행하므로 하나의 컴포넌트로 볼 수 있다(장바구니에 담긴 제품 또한 하나의 컴포넌트이다. 제품 정보를 조회하고 수량을 변경하는 기능을 하므로.)
  • 컴포넌트 단위로 코드를 작성하면, 컴포넌트 간 의존성이 없어 독립적으로 작성이 가능하고 재사용성이 용이하다. 또한 애러가 발생 시 그 기능을 담당하는 컴포넌트의 애러만 수정하면 되기 때문에 유지보수가 편리하다. 서로 독립적이기 때문에 Unit test를 하기에도 편리하다.
• 범용성 (Learn Once, Write Anywhere)
  • React는 JavaScript 프로젝트의 어디에든 유연하게 적용이 가능하다.
  • Facebook에서 관리되고 안정적이고, 가장 유명하며 리엑트 네이티브로 모바일 개발도 가능하다.
  • Framework는 생태계에 종속적이지만, React는 기존 project에도 유연하게 사용이 가능하다.

React Intro

About JSX!!

• JSX(JavaScript XML) : React는 compoment를 선언하기 위해 HTML과 비슷한 Markup 언어인 JSX를 사용한다. JavaScript를 확장한 문법이다. React에서 UI를 구성할 때 사용하는 문법이며, JSX를 사용하여 React의 element를 만들 수 있다.
• 위에서 언급한 대로 JSX는 JavaScript의 확장된 라이브러리이지만, 바로 browser가 실행할 수 있는 코드가 아니기 때문에 JavaScript로 변환해줄 별도의 컴파일러가 필요하다. 이것을 "Balbel"이라고 부른다. 아래의 사진에서 볼 수 있듯이, JSX 코드는 Bable compiler에 의해 JavaScript 코드로 해석이 되고, 이 코드는 Browser에서 실행이 된다.

DOM & React JSX

• Reac 에선 DOM과 다르게 css, jsx 문법을 이용하여 개발이 가능하므로 하나의 Compoment를 구현하기 위해 필요한 파일을 줄이 수 있게 되었다.
  즉, JSX를 사용히면 JavaScript 민으로 Markup 언어의 형태의 코드로 작성하여 dom에 배치할 수 있게 되었다.

JSX를 써야 하는 이유는???

• DOM에서는 JavaScript와 HTML을 script태그 또는 inline 방식을 통해 HTML과 JS를 연결하기 위한 작업이 필요하지만, React는 JSX를 이용하여 기능(JavaScript)과 구조(HTML)를 한 번에 볼 수 있고 작업이 가능하다. (여기서, JSX를 이용하여 Reac요소를 만드는 이유는 코드의 가독성을 높이고 복잡성을 줄이기 위해서 이다.)
• 구조와 동작에 대한 코드를 컴포넌트라고 한다.

// JSX 사용 X

function App() {
  const user = {
    firstName: "Sora",
    lastName: "Kang"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }

  // Use React without JSX 
return React.createElement("h1", null, `Hello, ${formatName(user)}!`);
}

export default App;

VS

// JSX 사용 O

function App() {
  const user = {
    firstName: "Sora",
    lastName: "Kang"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }

  // Use React without JSX 
//   return React.createElement("h1", null, `Hello, ${formatName(user)}!`);


  // Use React with JSX 
  return <h1>Hello, {formatName(user)}!</h1>;
}

export default App;

위의 코드에서 각 마지막 return 문을 보면 JSX를 사용하지 않은 JavaScript 코드는 Reac.createElement method로 h1 tag 요소를 하나 만들고, 몇몇의 인자를 더 넣어야 하지만, JSX를 사용한 return문은 굳이 element를 생성하는 method를 쓰지 않고도 간단하게 코드를 추가하였다. 확실히 가독성은 JSX를 이용하는 편이 더 코드가 간단하며 가독성이 좋다.

JSX 활용

JSX 규칙

1. JSX에서 여러 엘리먼트를 작성하고자 하는 경우, Opening tag와 closing tag로 감싸주어야 한다.
2. element class 사용 시 className으로 표기해야 한다. div className="meeting"
   
   
3. 만약 class로 작성을 하면 React는 HTML 클래스가 아닌 JavaScript class로 받아들이므로 주의해야 한다.
   
   
4. JavaScript 표현식 사용 시 { } 중괄호를 사용한다 { } 그렇지 않으면 text로 인식한다!!
   
   
5. 사용자 정의 component는 대문자로 시작한다.(PascalCase).
   
   

   function App(){ 
   	const name="sora kang"; 
   	return ( 
       	<div> Hello,{name}  // JavaScript 표현식은 { } 를 사용한다 
           
           </div> 
           
           );​

   
   

• React element가 JSX로 시작되면 대문자로 시작해야 한다.
• function sum () { ... } ==> function Sum() { ... }
• 소문자로 시작하면 일반적인 html element로 인식을 하게 된다.

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

<div>
  {
  (1+1===2) ? (<p>정답</p>) : (<p>오답</p>)
}
</div>

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

const posts=[
    {id:1, title: "Hello Sora",content: "Welcome to learning React!!"},
    {id:2,title: "Installation",content:"You can install React from npm"}
    ];

  function Blog(){
    const content=posts.map((post)=>
    <div key={post.id}>
        <h3>{post.title}</h3>   
        <p>{post.content}</p>
    </div>
  };

  relturn (
      <div>
          {content}
      </div>
  )

• 위의 코드에서와 같이 HTML 엘리먼트는 map()함수를 사용한다. (왜지?) 그리고 map 사용 시 반드시 "key" JSX 속성을 넣어야 한다.
  그렇지 않으면, 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시되기 때문이다.

• 위와 같이 React child로 not valid 하다는 Error가 나오는 것을 볼 수 있다.

이 애러에 대해 좀 더 보자,, 아래의 코드는 위와 동일한 Error가 뜬다.

const posts = [
    { id: 1, title: "sora Kang", content: "Welcome to learning React" },
    { id: 2, title: "Installation", content: "You can install React from npm" }
  ];

  export default function App() {
    // const content = posts;
    // 위의 코드는  error가 난다.

    return (
      <div className="App">
        <h1>Hello JSX</h1>
        {content}
      </div>
    );
  }

• 이 코드의 결과를 보면 아래와 같은 결과물이 나온다. HTML, JS, CSS를 확인하려면 여기를 클릭

• 데이터를 화면에 표시하려면, 표시하려는 data type과 맞아야 한다. 위의 코드에서 발생한 "Object are not valid as a react child" Error는 React component에 rendering 하여 표시한 데이터가 원시 타입의 데이터가 아닌 객체를 그대로 랜더링 했기 때문이다.
• 이 애러를 수정하기 위해 변수 content를 map을 사용하여 각 객체의 값들을 아래의 코드와 같이 넣어주면 원시 값이 rendering이 되므로 애러가 해결된다!

const content=posts.map((post)=>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
    ) 

좀 더 정리할 사항이 있는데,, 글이 너무 길어져 다음 포스팅으로 넘겼다. 다음 포스팅 [20100806]- React 기초 II에서는 React rendering을 할 때 사용하는 map method에 대해 정리를 해보겠다.