print 8 - React Part 1

Achievement Goals

React 기본

• React를 이용한 컴포넌트 단위 개발의 장점을 이해할 수 있다.
• JSX와 같이 선언적인 형태의 문법을 사용하는 것의 장점을 이해할 수 있다.

React 주요 개념과 사용법

• 함수 컴포넌트와 클래스 컴포넌트를 만드는 방법과 차이를 이해할 수 있다.
• props의 특징과 규칙을 이해할 수 있다.
• props와 state와의 차이점을 이해할 수 있다.
• 상태 변경 방법과, 그 이유를 이해할 수 있다.
• 이벤트를 처리할 수 있다.
• lifecycle을 통해 작동 원리를 이해할 수 있다.
• React 컴포넌트 간 데이터 흐름 및 상호작용의 원리를 이해할 수 있다.

API 문서 연습

• React 공식 문서를 활용할 수 있다.

React를 구성하는 JavaScript 생태계

• Create React App을 구성하고 있는 babel 및 webpack의 목적과 필요성을 이해할 수 있다.

React를 하기 전 알아야 할 7가지 ES6 문법

• Destructuring
• Spread operator
• Rest parameters
• Default parameters
• Template literals
• Arrow function
• For loop

JSX

const element = <h1>Hello, world!</h1>;

위에 태그 문법은 문자열도, HTML도 아니다. 바로 JSX라고 하는 JavaScript의 확장 문법이다. 우리가 JSX를 쓰기만 하면 Babel이라는 프로그램이 알아서 JSX를 JavaScript 코드로 변환해 주기 때문에 우리는 다른 것에 신경쓰지 않아도 된다. 다른 것에 신경쓰지 않고 코드에만 집중할 수 있어서 좋긴 하지만, JSX를 쓰기 위해서는 다른 것들과 마찬가지로 규칙을 지켜야 한다.

1. 반드시 하나의 엘리먼트로 감싸야 한다.

위의 예시를 보면 제일 바깥쪽에 div태그를 이용하여 안의 다른 태그들을 감싼 것을 확인할 수 있다.

2. JavaScript의 코드를 적용할 땐 { }안에 작성한다.

위의 코드의 3번 째 줄에 name이라는 변수에 'walli'라는 값을 할당해 주었고 이 name이라는 변수를 실제로 JSX 코드 안에서 쓰기 위해 { }를 쓴 것을 확인할 수 있다. React 공식 문서를 확인해 보니 JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다고 한다. 예를 들어 2 + 2, user.firstName, formatName(user)등이 다 JavaScript 표현식이라고 할 수 있다.

3. JSX 내부에선 if문을 사용할 수 없기 때문에 IIFE나 삼항 연산자를 사용해야 한다.

위의 예시는 1+1 이 2일 경우 '정답'을 띄우고 아닐 경우, '탈락'을 띄우는 예제이다. 만약 삼항 연산자가 싫다고 하면, JSX 외부에서 먼저 if문을 써서 처리한 뒤, 그 리턴 값을 JSX 내부로 가져오는 방법도 있다.

4. 엘리먼트의 클래스 이름을 적용할 땐 className을 사용한다.

기존의 HTML 태그를 사용할 땐 class를 써서 태그에 이름을 붙여줬는데 JSX에서는 반드시 className을 써야 한다. 만약 JSX에서 class를 쓰면 에러가 나지는 않지만, 화면에 className을 쓸 것을 권장하는 메세지가 뜬다.

Must Know Concepts

1. JSX 문법을 도입하게 된 이유가 무엇일까요? 어떤 장점이 있나요?

JSX는 브라우저에서 바로 읽을 수 없고 반드시 Babel같은 트랜스파일러가 컴파일을 해줘야만 브라우저에서 쓸 수 있다. 그렇다면 이런 과정을 거쳐야만 쓸 수 있는 JSX를 도대체 왜 쓰는 것일까? 바로 JSX가 HTML 문법과 비슷하다는 점에 있다. HTML과 비슷하다는 것은 사람의 눈으로 봤을때 조금 더 직관적이고 가독성이 높다는 것이다. 따라서 우리는 우리의 컴포넌트나 프로그램의 모습이 어떨지 눈에 보이기 때문에 우리는 이제 각 컴포넌트나 프로그램이 하는 기능에 조금 더 치중할 수 있게 된다. 결국 JSX는 가독성을 높여 우리가 프로그래밍에 조금 더 집중할 수 있게 도와주고, 따라서 유지보수와 협업에도 용이하다는 장점이 있다.

2. JSX를 사용하지 않고 React를 사용할 수도 있나요? (advanced)

JSX 엘리먼트는 React.createElement를 호출하기 위한 문법 설탕이다. 다시 말해서 JSX로 하는 일은 순수 JavaScript로 충분히 구현할 수 있다는 것이다.

다음과 같이 JSX로 작성된 코드는 아래처럼 JSX코드를 사용하지 않고도 작성할 수 있다.

3. JSX에 JavaScript 표현식을 쓰려면 어떤 방법으로 써야 하나요?

위에서 언급한대로 JSX에서 JavaScript 표현식을 쓰려면 중괄호 { }를 써서 이 괄호안에 JavaScript 표현식을 작성하면 된다.

4. import / export 구문은 어떤 식으로 사용할 수 있나요?

1) 모듈 내보내기(export)의 경우에는 아래와 같이 export default를 이용해서 쓰면 된다.

이 코드는 다른 파일에서 이 파일을 import할 때, 위에서 선언한 App 클래스를 불러오도록 설정한다.

2) 모듈 불러오기(import)의 경우 App 컴포넌트에서 Gpp라는 컴포넌트를 불어온 것이다. Gpp도 클래스이기 때문에 App에서 불러와서 Gpp클래스 안에 JSX요소를 랜더링 해준 것이다.