TIL - 7주차

TIL 45일차 - React는 아직도 싱기방기

OOP, 클래스, 상속성 정리와 Phone-Book 만들기

Today’s Key 🔑

• Javascript를 이용한 객체 지향 프로그래밍 방법을 정리하고 클래스의 상속성에 대해서 노션 페이지에 정리하였다. OOP 정리 글 읽으러 가기

• Velopert님의 git-book을 보면서 phone-book을 만들어보고, 리엑트의 기본적인 내용을 공부중에 있다. Phone-Book 만드는 과정 보러가기

Phone-Book을 구현하면서 기록할 것들

Velopert는 위대하다.

우선, 비구조화 할당으로 객체 형태의 props를 받아올 때, 해당 props를 실수로 전달해주지 않을 경우 발생하는 충돌을 해결하는 defaultProps. 아래의 코드처럼 컴포넌트의 상단에서 랜더 함수 내부에서 정의된 props ‘info’의 기본값을 설정해줄 수 있다.

static defaultProps = {
    info: {
      name: '이름',
      phone: '010-0000-0000',
      id: 0
    }
  }

...

render() {
  const {
      name, phone, id
    } = this.props.info;
}

다음으로, 컴포넌트 내부에 배열을 이용하여 상태를 저장하는 경우가 많다. 그래서 배열에 저장한 데이터를 map과 같은 함수형 메소드로 브라우저에 보여지게 만든다. 이때 주의해야 할 점은 ‘key’라는 요소를 JSX에 심어주는 것이다.

render() {
  const { data } = this.props;
  const list = data.map(
    info => (<PhoneInfo key={info.id} info={info}/>)
  );

info.id 라는 고유한 값을 key에 넣어주어 리엑트가 변화를 자연스럽게 감지하고, 업데이트시에 불필요한 작동 없이 최적화해준다. 리엑트로 배열을 처리해 줄 때 주의해야 하는 부분이다. key 값을 따로 설정해주지 않으면 자연스럽게 배열의 인덱스를 가진다. (최적화가 힘들 뿐이다. 랜더링에는 문제 없다.)

내일도 계속해서 react를 공부하면서 정규 일정을 소화할 예정이다. 내일은 또 신경치료를 하는 날인데, 잘 할 수 있을지 싶다 ㅠㅠ 🙃