React 기초 정리 - 2장 (배포, 컴포넌트, Props + 중괄호 문법)

React 기초 정리 1장에 이어, 2장에서는 배포와 문법들에 대해 설명하고자 한다.

배포

터미널에 다음 과정을 수행하면, React 앱의 배포 버전을 생성할 수 있다.

1. npm run build를 입력한다. 메인 디렉토리에 'build' 폴더가 생성된다.
2. npx serve -s build를 입력한다. 이 명령어는 build 폴더 속 index.html 파일을 실행하는 웹서버를 구동한다. 서버 구동과 동시에 접속 주소를 알려 준다.

이제 개발 환경 설정, 배포를 알아보았으니, 어떻게 React 코드를 작성하는지에 대해 알아보겠다.

컴포넌트

React에서는 HTML DOM의 재사용성과 코드 가독성을 높이기 위해 사용자 정의 태그를 선언하여, 여러 태그를 그룹핑하여 사용한다. React에서는 이를 컴포넌트라고 한다.
이는 App.js에서 함수의 형태로 선언하여 사용할 수 있다. (함수 이름은 PascalCase 형태로 작성한다.)

예를 들어, 다음 두 개의 코드는 완전히 동일하게 동작한다.
아래의 코드

function MyHeader() {
    return (
        <header>
            <h1>안녕하세용.</h1>
        </header>
    );
}

function App() {
    return (
        <Myheader></Myheader>
        <Myheader></Myheader>
        <Myheader></Myheader>
    );
}

와, 아래의 코드

function App() {
    return (
        <header>
            <h1>안녕하세용.</h1>
        </header>
        <header>
            <h1>안녕하세용.</h1>
        </header>
        <header>
            <h1>안녕하세용.</h1>
        </header>
    );
}

는, 완전히 같은 결과를 사용자 화면에 표시한다.
컴포넌트를 사용함으로써 코드의 가독성, 재사용성을 모두 유지할 수 있는 것이다.

이제 우리는 React에서 기존의 HTML 태그를 묶어 사용자 지정 태그로 관리하는, 컴포넌트에 대해 배웠다.
그렇다면 HTML 태그 안의 속성은, React에서는 어떻게 지정할 수 있을까?

Props

prop은 React 컴포넌트에 전달되는 모든 데이터를 뜻한다.
React에서 props는 HTML 속성과 비교할 수 있다. HTML 요소는 '속성'을 가지고 있고, React 컴포넌트는 props를 가지고 있다.
props는 컴포넌트 호출 안에 쓰이며 prop="value"와 같이 HTML 속성과 동일한 구문을 사용한다. React에서, 데이터의 흐름은 단방향(unidirectional)이다. props는 오직 부모 컴포넌트에서 자식 컴포넌트로 내려간다. 또한 props는 오로지 읽기 전용이다. props는 컴포넌트에 데이터를 전달하는 방법이며, 전달된 후에는 변수를 통하여 접근할 수 있다.

props를 이용해 코드를 작성하게 되면, 변수를 통해 이에 대해 접근하게 된다. 이때 JSX 문법 내에서, 변수 적용 방법으로서 사용할 수 있는 것이 바로 중괄호 문법이다.

중괄호 문법

중괄호 문법은 JSX 문법 내에서 편리하게 변수를 HTML 태그에서 사용할 수 있게 한다.

App.js에서, 사용자의 이름을 하나 저장한다고 해 보자.

const userName = 'jiwon'

만약 Vanilla JavaScript로 이 userName을 h1 태그에 넣으려 한다면, 이렇게 코드를 작성해야 한다.

document.queryselector('h1').innerHtml = userName;

그러나 JSX 문법에서 중괄호를 사용하게 되면, 별도의 선택자 없이 JSX HTML에 중괄호를 사용하는 것만으로도 h1 태그에 변수를 삽입할 수 있다.

<h1>{ userName }</h1>

이렇게 말이다.

사용법

Props를 실제로 사용하는 예시는 다음과 같다.

우선 props를 사용하지 않고, 위와 같은 코드로 위와 같은 화면을 만들었다. 이는 하드코딩을 통해 만든 정적인, static한 코드라고 볼 수 있다.

만약 만들어야 하는 <li> 태그의 개수가 늘어나게 되거나, 서버에서 받아온 정보를 토대로 화면 내용을 구성해야 하는 경우에는 이와 같은 정적 화면 생성 방식을 사용하기 어려울 것이다.
그렇다면? 우리는 동적으로 태그를 생성해야 한다.

우선 예시로 topics라는 배열에, 동적으로 <li> 태그를 생성해야 할 속성들이 들어왔다고 가정해보자.
그리고 App 함수 내의 topics를 Nav 컴포넌트에 prop으로 던져 준다. (중요!)

그리고 이 topics라는 배열에는, 위와 같이 key로 id, title, text를 가지는 세 개의 object가 들어있다고 생각해 보자. (object의 개수는 상관없다.)

우리는 이 배열을 가지고, 동적으로 <li>태그를 생성하려 한다. 그러기 위해서는 기존 코드에서 여러 <li>태그들을 관리하는 Nav 컴포넌트를 손봐야 할 것이다.

Nav 컴포넌트는 다음과 같이 ordered list 태그 속 여러 list를 가지고 있다. 이를 동적으로 생성하려면...

1. 우선 정적으로 작성된 <li> 태그들을 삭제해야 한다.
2. (1)의 태그들을 삭제한 자리에 중괄호 문법을 사용하여, liList라는 빈 배열 속의 추후 추가될 태그들을 삽입하도록 만들어야 한다.
3. [중요!!] App()의 정보를 받아오도록 Nav 함수의 파라미터로 props를 추가한다.
4. map 함수(추천) 또는 for문을 통해 배열을 펼쳐, 동적으로 태그를 생성한다.

위 과정을 코드로 나타내면 다음과 같다.

위의 6번 줄에서 기존 HTML의 id 속성이 아닌 key를 사용하는 이유는, React에서는 개별 key 속성을 사용해 태그를 구분하기 때문에 혼동으로 인해 생길 수 있는 문제를 방지하기 위해서다. (안쓰면 경고메세지 뜸)

liList라는 props.topics 내의 정보를 차례대로 포함한 태그를 담은 배열을 map 함수를 사용해 만들었고, 이들을 중괄호 문법으로 <ol> 안에 배치, 최종적으로 이를 반환하여 다음과 같은 뷰를 동적으로 구현했다.

React 기초 3장에서는 이벤트, state와 본격적인 기능 구현에 대해 알아보도록 하자.