10.29. 16일차 TIL - JSX, Components, Props

React에서는 이전과는 다르게 JSX라는 형식의 파일에 코드를 작성한다.

---

1. JSX

JSX란  JS를 확장한 문법으로 JS의 모든 기능이 포함되어 있으며 React를 생성하기 위한 새로운 문법이다.

→ JS + XML(HTML) 이라고 생각하면 이해하기 쉽다. 파일의 구조는 아래와 같다.

• 외부 파일 Import 영역
• 컴포넌트_01
  
  • JS코드 작성 영역
  • JSX 작성 영역
• 컴포넌트_02
  • JS코드 작성 영역
  • JSX 작성 영역
• ...
• Export 영역

 

---

2. Components

1) 개념

공식문서에서 컴포넌트를 JS 함수와 유사하다고 소개하고 있다.

 

컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴 볼 수 있다. 이 때 'props'라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React Element를 반환한다.

 

2) 표현법

• 함수형 컴포넌트

함수형 컴포넌트 예시

 

• 클래스형 컴포넌트

클래스형 컴포넌트 예시

 

두 가지 모두 기능상으로는 동일하나, 공식 홈페이지에서는 함수형 컴포넌트의 사용을 권장하고 있다. 함수형 컴포넌트가 클래스형 컴포넌트보다 사용하기 쉽기 때문에 개발 환경에서 함수형 컴포넌트를 훨씬 더 많이 사용하게 될 것이라고 한다.

 

3) 주의점

• 컴포넌트를 만들 때 반드시 이름의 가장 첫 글자는 대문자로 한다.
• 폴더는 소문자로 시작하는 카멜케이스로 이름을 작성한다.
• 파일은 대문자로 시작하는 카멜케이스(파스칼케이스)로 이름을 작성한다.

 

4) 부모 - 자식 컴포넌트

HTML에서 상위태그가 부모, 하위태그가 자식으로 부모의 값을 자식에게 상속할 수 있었던 것 처럼 JSX의 컴포넌트 또한 위치하는 곳에 따라 부모 컴포넌트와 자식 컴포넌트의 관계를 갖을 수 있다.

 

간단한 예시를 통해 무슨 말인지 확인해보자.

 

위 처럼 아래 위치한 App 컴포넌트는 Child 컴포넌트를 반환하고 있다. 다시 말해 품고 있다.

이 때 App 컴포넌트를 부모 컴포넌트, Child 컴포넌트는 자식 컴포넌트의 관계를 갖게 된다.

 

이런 관계를 갖게 되면 부모가 props라는 임의의 값을 자식에게 넘겨줄 수 있게 된다. (상속시킬 수 있게 된다)

---

3. Props

props란 컴포넌트 간의 정보 교류 방법이다. 부모 컴포넌트가 자식 컴포넌트에게 물려주는 데이터이다. 

 

1) 특징

• props는 반드시 위에서 아래 방향으로 흐른다. (단방향)
• props는 반드시 읽기 전요응로 취급하며 변경하지 않는다.
• props는 객체의 형식의 데이터 묶음이다.

2) 사용법

• 전달 (주체 - 부모)

 

예시 코드에서 아버지는 홍씨이다. 아들은 아버지와 같은 홍씨일 것이므로 이것을 props를 통해 전달하고자 한다.

 

• 받기 (주체 - 자식)

 

이 때 console.log를 통해 props를 확인하면 object literal형태를 띄는 것을 알 수있다.

그러므로 키값을 호출하여 우리가 보는 화면에 렌더링 할 수 있다.

 

* object literal이란?

object literal이란 {key : "value"} 데이터 형태를 의미한다.

 

3) Props Children

자식 컴포넌트로 정보를 전달하는 또 다른 방법이다.

• 사용법

children 사용 예시

 

children은 부모에서 키와 벨류값으로 묶어서 자식에게 전달하는 것이 아닌, 자식 컴포넌트(User)에서 props.children을 받아 그대로 렌더링 해주는 방식이다. 왜 이렇게 방법을 구분해서 사용하는 것일까?

 

children은 Layout 컴포넌트를 만들 때 주로 사용된다고 한다.

 

외부에서 Layout 컴포넌트를 만들어 임폴트한 모습이다. 이 Layout 컴포넌트 안에는 header 라는 컴포넌트가 있고, header 아래에 {props.children}을 통해서 props를 받아 렌더링 하고 있다. 이렇게 하면 Layout 컴포넌트가 쓰여지는 모든 곳에서 <Layout>...<Layout>안에 있는 정보를 받아서 가져올 수 있게 된다. 이렇게 말이다.

 

결과적으로 header 컴포넌트를 Layout 컴포넌트에서 한번만 작성하면 여러 페이지에서 모두 보여지게 할 수 있다. 이는 우리가 1차 팀프로젝트를 진행할 때 헤더를 모든 페이지에 고정하는 방법을 몰라 하나의 html파일로 merge했는데 이처럼 모든 페이지에서 보여야하는 상단 고정 네비게이션 바에 사용한다면 정말 유용할 것이라고 생각한다.

4) Props 추출

앞서 말했듯 props는 객체의 형태로 키와 벨류값을 페어로 갖는 형태를 띄고 있다. 객체? 그렇다면 우리가 원하는 키의 벨류값만 추출하여 사용할 수도 있을 것이다. 이 때 JS에서 배웠던 구조분해할당을 사용하여 원하는 값만 추출할 수 있다.

---

★ 16일차 소감

 

짧은 시간 동안 새로운 개념이 많이 많이 들어오고 있다. 그리고 오늘부터 개인과제를 안내받아 금요일까지 마무리해야한다. react는 처음이기 때문일까 구조부터 되게 낯설어 아직 적응이 힘들다. 강의 또한 한번만 들으면 잘 이해가 되지 않아 JS주차 처럼 여러번 반복하여 듣고 있다.. 빨리 제공된 강의를 마치고 과제를 시작해야할텐데 .. 작은 걱정이 생겼다.. ㅋㅋ 그래도 너무 재밌다!!