부트캠프 27일차 (React)

 

오늘의 생각

드디어 리액트를 배우기 시작했다. 

 

보통 프론트엔드 개발자가 된다고 했을 때 HTML.CSS.JS 다음으로 공부해야할 것들 중 하나로 리액트를 꼽는다. 실제로 독학했을 때 많이 헷갈렸지만 너무나도 유용한 라이브러리라고 생각했다. 본격적으로 배우니 자바스크립트를 배울 때보다 새롭게 와 닿는 개념들이 많았다. 퀴즈도 여태 코드스테이츠에서 본 것 중 제일 많이 틀렸다...

 

확실히 리액트는 기본기가 많이 부족하다.

 

기본적으로 알고 있어야하는 문법들도 좀 더 심화된 문제들을 통해 접하니 문제점이 바로 짚이지 않았다.

 

특히 JSX 코드가 많이 헷갈렸다.

 

하나의 기능을 구현하기 위한 여러가지 방법 중 틀린 것을 찾는 문제에서 어려움이 있었다. 단순히 화면에 "Hello, World"를 출력한다고 해도 이를 구현하기 위한 JSX 코드 중 옳지 않은 것들을 분별하는 것이 조금 어려운 것 같다.

 

내가 틀렸던 문제의 경우, JSX 코드를 사용해서 Hello, World를 출력하는 맞는 코드를 찾아야 했는데, JSX를 사용하지 않고 만든 방식을 골랐다. 왜 맞는 답을 두고 이 방법을 생각했는지 나도 이해가 안된다.

 

 

다른 틀린 문제 중에는 JSX 문법을 잘못 사용하고 있는 예제를 고르는 문제가 있었는데, 위의 코드가 틀렸다고 생각했다. 배열의 각 요소는 각각 변수에 담길 수 있는 하나의 JSX 표현식이 될 수 있다는 사실을 몰랐다. 정답은 의외로 매우 간단했는데, 두개 이상의 HTML 태그를 감싸주는 태그가 없는 예시였다. 문제를 좀 더 조심스럽게 읽어야겠다는 생각을 했다.

---

오늘의 키워드

리액트React, 컴포넌트Component,  JavaScript XML (JSX), root 

 

---

오늘의 학습내용

• 리액트React의 특징 (선언형 프로그래밍, 컴포넌트 기반 구조)
• JavaScript XML(JSX)의 정의와 대표적인 주의사항
  • Openinig tag와 Closing tag로 감싸주기
  • class 대신 className
  • 자바스크립트를 쓸 때는 중괄호{}
  • React 엘리먼트(사용자 정의 컴포넌트)는 대문자로 시작
  • 조건문은 if문이 아닌 삼항연산자로
  • 여러 개의 HTML 요소를 작성할 때는 .map()을 활용
• 컴포넌트Component의 정의와 트리 구조 (최상위 컴포넌트 root)

 

---

어려웠던 keyword / 활용한 질문

 

Q. JSX로 명시적인 코드를 작성할 수 있다는 말이 무슨 뜻인가요?

 

A. 리액트는 하나의 파일(i.e. App.js)을 통해 웹 페이지를 구성하는 선언형 프로그래밍 기반이기 때문에 명시적인 코드가 작성일 가능하다고 말할 수 있습니다.

 

Q. 클래스형 컴포넌트와 함수형 컴포넌트의 차이가 무엇인가요?

A. 가장 큰 차이는 문법입니다.
클래스형 컴포넌트는 함수형 컴포넌트가 생기기 이전에 사용했던 스타일로 class 키워드와 extends Component 키워드를 포함해서 작성해야 합니다. 또한 class 키워드를 사용하기 때문에 생성자 함수를 가지고 있어야 합니다. 
함수형 컴포넌트는 function 키워드(hook)를 이용해 컴포넌트 이름만 입력하면 되기 때문에 더 편하고, 메모리 자원을 클래스형 컴포넌트보다 덜 사용합니다. 
단, 과거 클래스 컴포넌트를 사용한 프로젝트가 있기 때문에 클래스 컴포넌트의 문법을 알고 있어야 합니다.

 

Q. npx create-react-app myapp 이라고 입력했을 때 최상위 컴포넌트의 이름은 무엇인가요?

A. 기본으로 생성된 리액트 폴더의 경우 App.js 파일을 최상위 컴포넌트로 가지고 있습니다.

 

Q. 왜 컴포넌트의 최상위 엘리먼트에 key 속성을 부여해야 하나요?

A. 키 속성은 리액트가 리렌더링 시 컴포넌트를 분류할 수 있게하는 가이드를 제공하기 때문입니다. 예를 들어 map 메서드를 활용해 여러 개의 컴포넌트를 만들었다면, 리액트가 key 속성을 통해 형제 엘리먼트들과의 차이를 구분하고 분류할 수 있습니다. 이를 통해 리액트는 리렌더링 시 해당 엘리먼트를 다시 생성하지 않고 재활용할 수 있습니다. 따라서 리액트가 원활히 재활용할 수 있게 컴포넌트의 키 속성을 무작위로 할당하면 안 됩니다.