컴포넌트(Component)와 JSX

강의: 코딩앙마님의 React JS #3
https://www.youtube.com/watch?v=6szcPNsEGsw

함수형 컴포넌트

1) 함수로 만들어진 컴포넌트를 함수형 컴포넌트라고 한다.
2) 모든 컴포넌트는 대문자로 시작해야 한다.
3) 이 함수가 리턴하는 것은 바로 JSX(JavaScript XML)다.

function App() { //App 👈 대문자로 시작함
  return(   //return(......) 👈 JSX(JavaScript XML)
    <div className="App">
      </div>
    )
}

export default App;

JSX(JavaScript XML)

태그에 style을 적용하고자 한다면

1) 객체로 작성해야 한다.
2) 또한 카멜케이스를 사용한다.

function App() {
  const name = "Cecilia";
  return (
    <div className="App">
      <h1
        style={{  //👈 style을 사용하기 위한 객체 부분
          color: "blue",
          backgroundColor: "pink",  //👈 카멜 케이스 사용
        }}
      >
      </h1>
    </div>
  );
}

export default App;

중괄호로 변수를 사용할 수 있다.

return문 전에 변수 name을 만들고
중괄호 안에 변수명을 적어주면 'Welcome, Cecilia!'가 잘 실행되는 걸 확인할 수 있다.

function App() {
  const name = "Cecilia";
  return (
    <div className="App">
      <h1
        style={{
          color: "blue",
          backgroundColor: "pink",
        }}
      >
        Welcome, {name}! //👈 {변수}사용
      </h1>
    </div>
  );
}

export default App;

주의

중괄호 안에 숫자나 문자열은 잘 사용할 수 있지만
불린타입이나 객체는 표현하지 못한다.

  const user = {
    name: "penguin"
  }
  
  ...
  
<p>{user}</p>   //에러

하지만 객체 user 그 자체가 아닌 user의 name은 표현할 수 있다.

= 객체의 key는 사용 가능하다. {object.key} 👈이렇게!

  const user = {
    name: "penguin"
  }
  
  ...
  
<p>{user.name}</p>  //👈 {object.key}

//penguin이라고 잘 표현된다!

아래 코드는 변수 google 객체의 key인 name과 url을 사용한 코드.

  const google = {
    name: "Google",
    url: "https://www.google.co.kr/",
  };

...

<a href={google.url} target="_blank">
{google.name}
</a>

👇 오늘 강의를 보며 내가 작성한 전체 코드

function App() {
  const name = "Cecilia";
  const user = {
    name: "penguin",
  };
  const google = {
    name: "Google",
    url: "https://www.google.co.kr/",
  };
  return (
    <div className="App">
      <h1
        style={{
          color: "blue",
          backgroundColor: "pink",
        }}
      >
        Welcome, {name}! <p>{2 + 3}</p>
        <p>{user.name}</p>
      </h1>
      <a href={google.url} target="_blank">
        {google.name}
      </a>
    </div>
  );
}

export default App;

잘못되었다면 부디 이 글을 보는 누군가가 지적해주시기를 🙏