React 다시보기 #1

React를 사용하는 이유가 뭘까?

 

기존의 Javascript와 React의 차이점을 알기

 

React는 더 유연하고 부드럽다 -> 모바일 app처럼

그 이유는 리액트는 작성한 코드가 바로 화면에 보여지는게 아니고

내부적으로 코드가 수정된 후 보여진다.

 

그러므로 더 빠르고 유연하게 화면을 띄워주고

다양한 라이브러리들이 존재하고 요즘 많이 쓴다!

 

리액트는 build 프로세스를 사용한다

 

 

tip. 변수명을 짓는 방법

Must not contain whitespace or special characters (except $ and _)

Valid: $userName, age, user_name, data$,...

Invalid: %userName, age/, user name,...

 

May contain numbers but must not start with a number

Valid: user3, us3r, ...

Invalid: 3user, 11players, ...

 

Must not clash with reserved keywords

Valid: user, age, data, ...

Invalid: let, const, if, ...

 

Should use camelCasing

Recommended: userName, isCorrect, ...

Uncommon: user_name, iscorrect, ...

 

Should describe what the "thing" it identifies contains or does

Recommended: userName, isCorrect, loadData, ...

Uncommon: userDataPoint, correctness, dataLoader....

 

const, let, var 의 차이점은?

Props 과 구조분해할당의 중요성, 어떻게 하면 clean 하고 짧게 코드를 짤까?

즉,

 

<CoreConcept
title={CORE_CONCEPTS[0].title}
description={CORE_CONCEPTS[0].description}
image={CORE_CONCEPTS[0].image} />

 

또는

<CoreConcept
  {...CORE_CONCEPTS[0]} />

대신,

 

구조분해할당할때 {} 를 까먹지 않아야한다.

function CoreConcept({ image, title, description }) {
  return (
    <li>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </li>
  );
}

 

저걸 안하면 props.image 이런식으로 접근해야한다.