[Day 23] 2022-0725 : 쉬운 듯 어려웠던 ES6 클래스 문법 + props

오늘 배운 것

• 프로토타입 체인에 대해서 강의 듣고, 이해한대로 블로그 정리

[JavaScript] 프로토타입 체인

• 클래스 간의 상속에 대해 ES5 방식과 ES6 클래스 문법 방식으로 나누어 정리

[JavaScript] 클래스간의 상속 (프로토타입 상속)

• 리액트의 props 객체 개념, JSX 문법 익숙해지는 컴포넌트 제작 연습

새롭게 알게된 것

프로토타입 체인과 클래스 상속

• 프로토타입 체인이란 정말 간략히 말해서, 하나의 프로퍼티를 조회할 때 해당 객체에 존재하지 않으면, 그 상위 프로토타입, 거기에도 없으면 그것의 상위 프로토타입까지 조회하여 실행하는 것을 말한다(스코프 체인처럼)... 모든 객체의 상위 프로토타입 constructor는 Object 이다. 그렇기 때문에 빌트인 메서드도 프로토타입 체인에 의해 실행될 수 있는 것이고, DOM 객체도 마찬가지로 상위 클래스의 인스턴스가 된다. 
• ES5의 생성자 함수 방식과 ES6의 클래스 문법은 보기에는 달라보이지만, 기본적으로 같은 원리(프로토타입)에 의해 작동한다. ES6 클래스 문법은 생성자 함수방식 대비 문법적으로 훨씬 가독성이 좋아 사용하기 편리하다는 장점이 있다. 
• ES6 클래스 문법에서 constructor()는 생성자 함수, 클래스의 메서드로 클래스 내에 단 한 개만 존재할 수 있다. 클래스 문법에서, 클래스간 상속을 위해 extends 키워드와 super() 연산자를 사용할 수 있다.
• super()연산자는 extends로 연결하는 상위 클래스의 모든 프로퍼티를 가져올 수 있으며(ES5방식에서 클래스 내에서 상위 클래스를 호출하는 것 처럼, super 키워드로 호출한다.) 이 때 arguments를 가져올 수 있다. 여기서 함수 매개변수에서 기본 값을 설정해주는 것 처럼, 각 매개변수 = 디폴트값 이런 식으로 바로 할당해버릴 수도 있음.
• 매개변수로 프로퍼티를 가져올 경우,  arguments의 순서를 맞춰주어야하기 때문에 그냥 super()를 호출해 전체 프로퍼티를 다 가져온 뒤, this의 프로퍼티를 명시적으로 할당해주는 것이 편하다고 한다. 

리액트 props와 JSX 문법으로 만드는 컴포넌트

• 리액트의 props 개념이 잘 이해가 안되었는데, 강의를 계속 계속 돌려보고 좀 찾아보니까 어느정도 이해가 되는 것 같아서 정리해보려고 한다. 
• 먼저 리액트에서는 상위 컴포넌트에서 하위 컴포넌트를 불러와 하나의 컴포넌트를 완성시킬 수 있고, 이를 화면에 렌더링 하는 방식을 사용한다. 이 때 데이터 값을 조금 더 동적으로 변화시키기 위해서 props라는 객체를 사용한다.
• 컴포넌트 안에 고정된 값이 존재해서 그 값을 가지고 계속 컴포넌트를 호출한다면, 컴포넌트를 재사용한다는 의미가 별로 없을 것이다. 왜냐? 우리가 하고 싶은 것은 컴포넌트의 모양은 그대로 유지하면서 데이터만 다른 여러개의 컴포넌트를 만들어내는 것이기 때문이다. 
• props 개념을 이야기하기 전에 함수를 재사용하는 것에 대해 떠올려보면 좋을 것 같다. 같은 함수를 두고, 같은 기능을 하지만 결과 값만 다르게 하기 위해서, 즉 함수를 "재사용"하기 위해서 우리는 매개변수와 전달인자를 활용하고 있다. 함수를 호출할 때 각기 다른 전달인자를 호출하면, 함수에서는 이를 매개변수로 받아와 특정 동작을 한 뒤 값을 리턴한다. 
• props도 동일하다. 상위 컴포넌트에서 하위 컴포넌트를 사용할 때 (함수로 치자면 호출할 때?) 여기에 값을 전달해서 그 해당 컴포넌트에서 전달된 값을 받아와 즉, props 객체로 전달된 값들을 받아와서 컴포넌트 내에서 활용한 뒤 이 컴포넌트를 리턴한다. 
• 다만 실제 함수처럼 매개변수와 전달인자의 형태는 아니고, 조금 독특하지만 HTML 에서 어트리뷰트를 설정할 때 처럼, 컴포넌트의 프로퍼티를 설정해 전달할 수 있다.

// Test 라는 하위 컴포넌트를 사용하는 상위 컴포넌트 App
import Test from './components/test';

function App() {
  // Test 컴포넌트로 페이지를 구성하려고 한다. 
  // 이 때 arr 안에 들어있는 각 데이터를 하나씩 사용하여 Test 컴포넌트를 생성하고 싶다.
  const arr = [1, 2, 3, 4];
  return (
  // 마치 html 문법에서 어트리뷰트를 생성할 때 처럼 (원하는)이름 = {전달할 값}
  // JSX 문법에서는 {}중괄호 안에 변수 등 값으로 평가될 수 있는 것들이 들어간다.
    <div>
      <Test value={arr[0]} />
      <Test value={arr[1]} />
      <Test value={arr[2]} />
      <Test value={arr[3]} />
    </div>
  );
}

// export된 App 컴포넌트는 index.js 에서 렌더링된다.
export default App;

// 이것은 하위 컴포넌트 Test
// 매개변수로 props를 받아오고 있다. (이름은 상관 없지만 알기 쉽게 props라고 하는 것이 좋다.) 
// 이 props는 properties의 줄임말로, 아까 상위 컴포넌트에서 이 Test 컴포넌트를 생성할 때
// 전달했던 값이 키 : 값 쌍으로 이 props 객체로 전달된다.
function Test(props) {
  // 내가 해야하는 것은 그 값을 사용하기 위해 props 객체를 키 값으로 조회하는 것이다.
  return <div> 전달된 값 : {props.value}</div>;
}

// 마찬가지로 Test 컴포넌트를 내보내고 있으며,
// 이렇게 내보내진 Test 컴포넌트가 상위 컴포넌트 App에서 사용된다. 
export default Test;

화면에 렌더링 된 Test 컴포넌트들, 각각 다른 값을 가지고 있다.

• 참고적으로 JSX 문법은 뭐... HTML과 JS를 섞어놓은 모양새인데, JS 에서 생성된 값을 사용하기 위해서 중괄호를 활용한다. 컴포넌트 생성시 return문 이전에 상수나 변수를 일반 자바스크립트처럼 생성하면, return문 안의 JSX 문법으로 이루어진.. 컴포넌트? 부분에서 중괄호 안에 변수명으로 활용할 수 있다.
• 컴포넌트를 개발하다 보면 어느 시점에 컴포넌트가 거대해지는 순간이 오는데, 컴포넌트라는 것의 목적이 작게 분할하여 유지보수를 쉽게 하면서 복합적인 UI를 만드는 것이기 때문에 하나의 컴포넌트에서 모든 것을 해결하기 보다는 적절한 시점에 분할하는 것이 좋다. 분할하는 것에 정해진 규칙은 없으며, 경험적으로 알 수 있다고 한다.

SUMMARY

잘 한 점

• 빨리 끝났다고 놀지 않고 자기주도적으로 추가 학습 한 점
• 정규 시간 이후 내려놓고 잠시 쉰 것
• 리액트 강의 듣고 이해한만큼 정리한 것 : 글로 정리하니 더 명확하게 이해가 되는 듯.

보완할 점

• 궁금한 점에 대해서 대충 짚고 넘어간 것. 다음부터는 질문사항 꼭 적어놨다가 세션시간에 많이 질문하기.
• 아침 시간, 저녁 시간 시간표 일정대로 잘 되지 않는 점. 저녁 시간이 타이트해서 스케줄 조정 필요.
• 읽어야되는 알고리즘 책 자~꾸 안읽는 점. 아예 하루에 몰아서 하는 것이 좋을 듯 하다.

느낀 점

• 주말에 푹 쉬어서 그런지 오늘은 월요일임에도 크게 힘들지 않았다. 생각해보면 월요일이 가장 에너지가 넘치고 금요일로 갈수록 힘들어지는 것 같다.