코딩앙마 React JS 컴포넌트, JSX

REACT로 만든 페이지는 컴포넌트로 구성되어있다.

페이지단위로 HTML을 작성하는 것이아니라 각 부분을 컴포넌트로 만들어서 조립하는것.

 

장점 : 비슷한 부분들은 코드를 재사용할 수 있고, 유지보수도 쉬워진다.

e.g) 네이버의 제목 컴포넌트, 로그인 컴포넌트, 언론사 컴포넌트.... 

 

모든 컴포넌트는 맨 앞글자를 대문자로 한다.

 

함수형 컴포넌트에서 리턴하는 것을 JSX라고 한다.

생긴것은 html과 비슷하다.

 

class는 리액트에서는 예약어이기 때문에 class 이름을 지정할때는 className을 쓴다.

css style은 객체로 전달해줘야 쓸 수 있다.

function App() {
  const name = "가현";
  return (
    <div className="App">
      <h1
        style = {{
          color: "white",
          backgroundColor: "orange",
        }}
        >
           Welcome, {name}! </h1> // {}로 변수를 가져올 수 있다
        <p>{2+3}</p> // 숫자열,문자열은 잘 가져오지만 boolean이나 객체는 {}로 못가져옴
    </div>
  );
}

 

컴포넌트 안에 컴포넌트를 넣을 수 있다.

여러번써도 되고, 위치도 맘대로 옮길 수 있다.