0811 TIL REACT

🙆‍♀️React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.

1. 선언형
   한 페이지에 보여주기위해서 HTML,CSS,JS로 나누어 적기보다
   하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.

2. 컴포넌트 기반
   하나의 기능 구현을 위해 여러코드를 묶어둔 컴포넌트를 기반으로 개발한다.
   컴포넌트로 분리하면 서로 독립적이고 재사용이 가능해서 기능 자체에 집중해서 개발할 수 있다.

3. 범용성 (다양한 곳에 활용할 수 있다)

🙆‍♀️JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.

🙆‍♀️React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.

컴포넌트는 각자의 기능을 가지고 있으며, UI의 한 부분을 맡고 있기때문에 원하는 수정사항에 맞추어 기존 컴포넌트의 위치만 수정해주면 된다. 유지,보수하기가 수월하다.

🙆‍♀️create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다.

초보가 리액트를 만들때 흔히 하는 실수

let langs = ["JavaScript", "HTML", "Python"];
  let viewLangs = () =>  {
    return langs.map((it) => {
      return <p>{it}</p>;
    });
  };

  return (
    <div>
      {viewLangs()}
    </div>
  );

viewLang가 함수표현식으로 선언되어있기 때문에 ()를 붙여서 호출시켜야 작동한다.
viewLang은 함수 자체이다.

그외

font-awesome에서 아이콘이름 far랑 fas차이는 색이 채워지느냐 , 실선이느냐의 차이이다.
보통 useState는 react의 데이터흐름때문에 최상위 컴포넌트에 준다.
i태그가 아닌 FontAwesomeIcon 태그를 쓰면 둘다 같은 className을 줘도 css가 안먹을 수 있다.