p r o g r a m m i n g

React intro

hee.hee 2022. 6. 2. 12:04

 

 

React 

프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리
React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다.
“컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.

 

 

 

 

리액트의 세가지 특징

  • 선언형
    한페이지를 위해 html, css, js 나눠 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게
    JSX를 활용한 선언형 프로그래밍을 지향한다.
    여기서 명시적이라는 것은, 코드를 자세히 분석하지 않고도 그 의도를 분명히 알 수 있게 작성하는 방식
    개발에서 '무엇'에 집중 -> '애플리케이션'의 구조에 집중. '어떤 부분이 어떤 동작을 하느냐, 어떻게 생겼느냐'를 고민하는 것
    (선언형과 반대로, 명령형 프로그램은 '어떻게', '절차'에 집중함)

 

  • 컴포넌트 기반
    하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
    컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에 기능 자체에 집중하여 개발할 수 있다.
    컴포넌트 간 의존하지 않음. 기능에 집중할 수 있고, 유지보수가 편함. 유닛테스트 편함.
    하나의 컴포넌트는 하나의 기능만 하는 방향으로 개발해야한다.
더보기

컴포넌트 기반 개발의 가장 큰 장점은 기능별로 나눠진 컴포넌트를 미리 만들어두고 이후에 재사용하기 용이하다는 점입니다. 기획이나 디자인이 변경되어도 쉽게 고칠 수 있습니다.
리액트 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트 두 종류가 있습니다. 기존에는 클래스형 컴포넌트를 주로 사용했었지만, 최근에는 함수형 컴포넌트를 많이 사용합니다.

컴포넌트는 클래스 형태로 표현할 수도 있다.

 

 

  • 범용성
    프레임워크는 생태계에 종속되어 다른 프레임워크와 사용할 수 없다.
    반면, 라이브러리는 기존의 다른 프레임워크로 만든 웹 어플리케이션에 리액트를 추가해서 개발할 수 있다.
    리액트는 자바스크립트 라이브러리로, JS 프로젝트 어디서나 사용할 수 있다.
    또한, 페이스북에서 관리되어 안정적이고, 가장 유명하고 리액트 네이티브로 모바일 개발도 가능하다.

 

 

 

 

 

 

JSX

JavaScript XML.
JSX는 React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법입니다. 이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있습니다.

더보기

*XML(eXtensible Markup Language)은 W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다.

 

 

Babel
JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아닙니다.
브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 합니다.
이때 이용하는 것이 바로 “Babel”입니다. Babel은 JSX 브라우저가 이해할 수 있는 JavaScript로 컴파일합니다.
컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있습니다.
바벨을 통해야 jsx를 자바스크립트가 이해할 수 있는 코드로 변환해줌. npm run start를 해야지 변환이됨

React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있습니다. 즉, 컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄어들었고, 한눈에 컴포넌트를 확인할 수 있게 되었습니다.
JSX를 사용하면 JavaScript 만으로 마크업(markup) 형태의 코드를 작성하여 DM에 배치할 수 있게 되는 것이죠! (DM이 뭘까?)
주의할 점은 JSX은 HTML처럼 생겼지만, HTML이 아니기 때문에 앞서 언급했던 “Babel”을 이용한 컴파일 과정이 필요하겠죠?

DOM에서 JavaScript와 함께 사용하기 위해서는 JavaScript와 HTML을 연결하기 위한 작업이 필요합니다.
React에서는 JSX를 이용해서 DOM 코드보다 명시적으로 코드를 작성할 수 있습니다.
JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있습니다.
이렇게 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 합니다.

JSX 없이도 React 요소를 만들 수 있습니다. 다만 코드가 복잡하고, 가독성이 떨어지는 단점이 있죠. JSX를 사용함으로써 코드를 이해하기 쉬워집니다. 그리고 앞서 설명했던 Babel이 알아서 이 JSX 코드를 변환해 주니 편리하다.
한 개의 JavaScript 파일 안에서 HTML과 JavaScript로 나누어졌던 두 가지 일을 한 번에 처리할 수 있습니다.

코드스테이츠

 

 

 

 

 

 

 

JSX 주요 문법

opening tag와 closing tag

최상위에서 opening tag와 closing tag로 감싸줘야 한다. JSX는 돔트리 구조로 되어 있다.

virtualDOM에서 컴포넌트를 감지하고 효율적으로 비교할 수 있도록 하나의 돔트리 구조로 만들어 줘야한다.

리액트 컴포넌트 리턴값은 하나의 JSX 표현식이어야한다. 그래서 최상위 태그에서 묶어줘야한다.

 

 

 

class 아니고 className

CSS class 속성을 지정하려면 "className"으로 표기해야 한다.

만약 "class"로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들인다.

<div className="right">This is JSX!</div>

 

 

{ 자바스크립트 표현식 }

JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 한다. 

중괄호가 없으면 일반 텍스트로 인식한다.

const Counter = () => {
  return (
    <div className="tweetForm__input">
    {`total: ${dummyTweets.length}`}
    </div>
  );
};

 

 

 

 

 

엘리먼트는 대문자로 시작

React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 한다.

소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 함.

이렇게 대문자로 작성된 JSX 컴포넌트를 '사용자 정의 컴포넌트'라 부른다.

function Hello() {
 return <div>Go Away!!!!!</div>;
 }

 

 

 

삼항연산자 사용

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

리액트에서 false면 null처럼 빈 값이다. 하지만, 숫자 0은 null이 아님.

리액트 컴포넌트 리턴 값은 하나의 JSX 표현식이어야 한다. 때문에 if 못씀.

 

 

 

여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수 사용
React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용한다.

map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 한다.

"key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다.

key는 리액트가 항목을 식별하는 데에 사용된다. 배열 내부의 객체에 사용된다. 때문에 랜덤하거나, 고유값이 아닌 키 값을 부여하면 안된다.

더보기

key는 데이터가 가지는 고유한 id 값(식별자)을 활용한다. key는 변하지 않고, 예상 가능하며, 유일한 값을 지정해야 한다. 하지만 고유한 id 값이 없을 경우 배열의 요소가 가지는 인덱스를 이용한다. 다만, 인덱스를 활용은 최후의 수단(as a last resort)으로 사용해야함.
항목의 순서가 바뀔 수 있는 경우도 마찬가지이다. Math.random() 등으로 무작위로 생성된 값을 key로 지정하게 되면, 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠질 수 있다.
더 자세한 내용에 대해서는 (공식 문서)를 참고. (리스트와 Key)

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
        const isParkHacker = tweet.username === 'parkhacker';
        const tweetUserNameClass = isParkHacker
          ? 'tweet__username tweet__username--purple'
          : 'tweet__username';

        return (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              <img src={tweet.picture} />
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                <span className={tweetUserNameClass}>{tweet.username}</span>
                <span className="tweet__createdAt">{tweet.createdAt}</span>
              </div>
              <div className="tweet__message">{tweet.content}</div>
            </div>
          </li>
        );
      })}
    </ul>
  );
};

 

 

 

undefined를 렌더링 하지 않는다

React 컴포넌트 함수가 undefined를 반환해서 렌더링하면 오류가 발생한다.

하지만 {JSX 내부}에서는 undefined를 렌더링 해도 된다.https://e2e2e2.tistory.com/30

 
 

 

 

 

더보기

리액트 네이티브란?
React의 방식으로 네이티브 앱을 개발할 수 있는 페이스북의 오픈 소스 프레임워크입니다
create-react-app 이란? 
SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다 . 
npx create-react-app 으로 새로운 리액트 프로젝트를 시작할 수 있다.
Create React App은 리액트 프로젝트를 만드는데 최적화된 도구로서 Babel, webpack 같은 도구들이 이미 포함되어 있고,
굳이 따로 설정을 해줄 필요는 없다. Create React App을 이용하지 않고도 프로젝트는 시작할 수 있지만 프로젝트를 구동시키기 위한 많은 툴들을 다 이해하기 힘들기 때문에 처음 리액트를 배울 때는 Create React App으로 쉽게 시작하는 편이 좋다.

종합퀴즈 9번 이해안됨(섹션2 유닛4 리액트 인트로)

 

 

 

 

 

reference

코드스테이츠

https://ko.reactjs.org/tutorial/tutorial.html

 

자습서: React 시작하기 – React

A JavaScript library for building user interfaces

ko.reactjs.org