S2 Unit 4. React Intro

💡 이번에 배운 내용

• Section2.
  서버와 통신이 가능한 구조적인 Web App을 만들 수 있다.
• Unit4. React Intro: JSX, 컴포넌트에 대해 학습하고 React의 3가지 특징에 대해 이해하고 설명할 수 있다.

느낀점

비동기에 상처입은 마음을 산뜻한 리액트 실습과 함께 어느 정도 치유했다. 🥹 처음 배우는 개념이지만 여기까지는 실습하면서 재미있었고 꽤 이해할 수 있었다. 리액트 실습이 생각보다 재미있다!
그러나 예전에 리액트 순환구조? 등을 책과 강의로 공부하다 애꿎은 저자를 향해 화만 내며 접었던 기억이 떠올랐다......! 지금 이 기초개념부터 확실하게 공부하다 보면 뒤의 부분을 학습할 때 조금이나마 수월하지 않을까 살짝 기대해본다.

키워드

React, 컴포넌트(Component), JSX, className, key속성, map() 메서드, 표현식, 삼항연산자, create react app

학습내용

Ch1. React Intro

React는 프론트엔드를 위한 자바스크립트 오픈소스 라이브러리다.
리엑트를 사용해 컴포넌트 단위로 UI를 설계하고 렌더링할 수 있다.

1) 리액트의 특징

• 선언형
  이전에는 UI를 만들 때 HTML, CSS, Javascript로 나눠서 작업했다.
  그러나 React를 사용하면 HTML,Javascript의 역할을 하는 JSX를 활용해 선언형 프로그래밍을 할 수 있다.

• 컴포넌트(component) 기반
  리액트는 하나의 기능 구현을 위해 컴포넌트를 기반으로 개발한다. 컴포넌트는 독립적으로 구성된 하나의 코드 묶음으로 일종의 기능을 기준으로 묶는다.(검색창, 메인, 헤더, 푸터 등등) 이러한 컴포넌트를 조합하여 개발한다.
  컴포넌트는 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다. 재사용성이 높아지면 유지보수에도 유리하다.

• 범용성
  리액트는 리액트 네이티브를 이용해 앱 또한 개발할 수 있다. 자바스크립트 프로젝트 어디에든 유연하게 적용될 수 있으며 (메타(구 페이스북)에서 관리되어)비교적 안정적이다.

2) JSX(JavaScript XML)

리액트에서는 CSS, JSX만을 가지고 컴포넌트를 만든다.
아래와 같이 JSX를 쓰지 않고도 리액트 요소를 만들 수 있으나

return React.createElement(
  'p', null, `Hello ${userName(user)}`
);

이런 경우에는 복잡하고 가독성이 떨어지기 때문에 대부분 아래처럼 JSX를 사용한다.

return (
  <p>Hello {userName(user)}</p>
);

이 JSX는 일종의 확장된 Javascript로 브라우저가 바로 읽지 못하므로 Babel을 사용해 Javascript로 컴파일 해주어야 한다.
일반 자바스크립트와는 다르게 몇가지 규칙이 있다.

• JSX의 컴포넌트명은 대문자여야 한다.
• 최상위에서 하나의 요소-오프닝 태그, 클로징 태그로 감싸줘야 한다.
  태그가 여러 개면 안된다. 최종적으로 하나의 태그로 묶여야 한다.
• class대신 className을 사용해야 한다.
• React에서 Javascript를 쓰고 싶으면 중괄호{}를 사용해야 한다.
  중괄호를 사용하지 않으면 일반 텍스트로 인식하며 중괄호에는 JS표현식이 들어간다.
• 표현식을 사용해야 하므로 if문 대신 삼항연산자를 사용해야 한다.
  (삼항연산자는 표현식이지만 if문은 표현식이 아니기 때문이다.)
• 여러 개의 HTML엘리먼트를 표현하기 위해서는 map()을 사용한다.
  그리고 이 map() 메서드를 사용할 때는 반드시 key 속성을 사용해야 한다.
• key 속성의 값은 반드시 변하지 않고, 예상 가능하며, 유일해야 한다. 때문에 주로 ID값을 사용한다. 랜덤으로 발생하거나 변하는 값은 안된다.

3) 컴포넌트

컴포넌트는 독립적으로 구성된 하나의 코드 묶음으로, 일종의 기능을 기준으로 묶는다. UI를 구성하는 필수요소이기도 하다.
모든 리액트 앱은 최소 한 개의 컴포넌트를 가지고 있으며 최상위 컴포넌트는 마치 트리구조처럼 구성되어 모든 컴포넌트의 근원, 즉 root가 된다. 이 root에서부터 자식 컴포넌트를 가질 수 있다. 각자의 컴포넌트는 독립적이지만 이렇게 자식-부모처럼 UI의 한 부분을 담당하기도 한다.

<일반적인 최상위 루트 선언>

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<AppList/>);

그리고 각 컴포넌트들은 수가 많을 경우 위에 언급한 것처럼 map()메서드를 사용하여 렌더링할 수 있다.

const menus=[
  {id: menu1, title:"Home" },
  {id: menu2, title:"myPage" },
  {id: menu3, title:"Settings" }
];

//컴포넌트 선언시 대문자 사용할 것!
const AppList=()=>{
  //여러 아이템을 렌더링할 때는 map()메서드를 사용한다.
  const listItem=menus.map((item)=>{
    return (
      //반드시 key 사용! 보통 id값을 넣는다.
      //class대신 className을 사용한다.
      <li key={item.id} className="main-list__item">
        {item.title}
      </li>
    );
  });
  //이렇게 한 쌍의 여는태그, 닫는태그로 감싸진 형태로 리턴한다.
  return <ul className="main-list">{listItem}</ul>
};

Ch2. Create React App

Create React App은 리액트 SPA를 쉽고 빠르게 개발할 수 있는 일종의 툴 체인, 툴 모음이다.
터미널에 node --version, npm --version으로 node와 npm의 버전을 확인하고 설치된 것을 확인했다면 간단한 명령어로 리액트를 시작할 수 있다.
디렉토리가 생성되기 원하는 위치에서 아래와 같이 명령어를 입력하면 리액트 앱이 설치된다.

npx create react app <원하는 리액트 프로젝트명>

위 명령어에서 지정한 프로젝트명으로 디렉토리가 생성되고 그 안에 필요한 파일들이 설치된다.
npm run install 을 사용해 필요한 node 모듈을 설치하고 npm run start로 리액트를 구동할 수 있다. start에 어떤 명령어가 쓰이는지는 package.json을 보면 확인할 수 있다.

파일구조

디렉토리가 설치되면 안에 src폴더가 생성되고 아래와 같은 파일들이 있다.

• index.js : 위에 언급한 최상위 컴포넌트 root가 실행되며 그 안에 자식 컴포넌트로 <App/>가 있다.
• App.js : 기본적으로 App 컴포넌트를 생성하는 구문이 작성되어 있다.
• index.css : body 등의 기본적인 CSS 작성이 가능하다.
• App.css : 그 외의 기본으로 작성되어 있는 기타 CSS들이 들어있다.

public 폴더도 있는데 안에 index.html이 있다.

• index.html: 기본적인 템플릿으로 주로 head태그 안에 추가할 요소들을 작성하는 용도로 사용된다.

추가학습과 링크

1. 리액트 공식 사이트
리액트에 대한 소개와 가이드가 무려 한글로 친절하게 작성되어 있다.
리액트에 대해 알아보고 학습하기 위해서 기본 개념 위주의 개념 가이드, 실습 위주의 자습서가 있다.
🔗 React

2. 리액트 개념 가이드
리액트의 기본 개념을 학습할 수 있게 정리해둔 페이지이다.
🔗 Hello World - React

3. 리액트 자습서
리액트를 따라해보며 익히는 실습 위주의 가이드 페이지이다.
🔗 자습서:React - React

4. 표현식(Expression)
JSX는 javascript 표현식을 사용해야 하는데, 표현식에 대한 학습이 좀 부족해서 정리해보았다.
자바스크립트에서 '문'이란 단계별로 수행되는 명령들로 리터럴, 연산자, 표현식, 키워드 등이 있다.
여기서 표현식(Expression)은 하나의 값으로 평가될 수 있는 문을 뜻한다. 변수, 함수를 생성하는 선언문이나 반복문(if, while 등)은 문이 될 수 없다. 그래서 JSX에서는 if문 대신 삼항연산자를 사용한다.

• 표현식에 대한 설명: Syntax Basics | PoiemaWeb