[React.js] 기초 실습 예제

안녕하세요 ITRecipe 입니다!
React로 miniProject를 진행해보려고 유튜브를 활용해
강의를 들으며 학습을 하고 있습니다.
학습한 내용을 꾸준히 학습도 하고,
이해도를 높이고자 기록해두려 합니다.
현직에 개발자로 계시는 지인분이 그러더라구요
"너의 기억은 날아가지만 기록은 남으니
학습한 내용은 무조건 기록으로 남겨라!
그것이 훗날 너의 자산이 될 것이다! "
라고 해주셨습니다.

개발자를 꿈꾸고 있는 취준생으로서
선배 개발자분의 명언을 새겨 듣도록 하겠습니다.
그럼 오늘부터 다시 화이팅!!

import './App.css';

//모든 컴포넌트(함수)는 대문자로 시작한다.
function App() {
  const name="Tom"; //이름을 받아올 변수 name 생성
//네이버라는 객체를 생성 해준다.
  const naver = {
    name : "네이버",
    url : "https://naver.com",
  }

  //return 시작부분부터 끝부분까지 JSX
  return (
    //class는 JavaScript의 예약어이기 때문에 className으로 작성해야한다.
    <div className="App">
      <h1
      style={{ //style은 객체로 전달해줘야 한다.
        //속성값도 문자열로 적어줘야 한다.
        color: "red",
        //backgroundColor도 카멜케이스로 작성해야 한다.
        backgroundColor : "green",
      }}
      >
        {/* <p>{2 + 3}</p> p태그안에 감싸서 이렇게 작성해주면,
        숫자나 문자열은 잘 나오지만, boolean 타입이나 객체는 
        표현하지 못한다. 
        
        {name} 이렇게 괄호로 감싸줘야 변수안에 있는 값을 표현할 수 있다.
        */}
        Hello, {name}. <p>{2 + 3}</p>
      </h1>
      <a href={naver.url}>{naver.name}</a>
      
    </div>
  );
}

export default App;

 

실습 결과