리액트란?

react.js는 자바스크립트 라이브러리의 하나임
사용자 인터페이스를 만들기 위해 페이스북에서 개발
싱글 페이지 어플리케이션 및 모바일 어플리케이션 개발 가능
2011년 페이스북의 뉴스피드에 처음 적용, 2012년 인스타그램닷컴에 적용
2013년 발표, 오픈소스화 됨

리액트의 동작 원리

• 초기 랜더링
• 가상 DOM 변경
• 재조정
• 실제 DOM 업데이트
  
  아마 파싱하는거 얘기하는 듯

리액트 문서 읽어보기

새로운 앱 만들기

npx create-react-app [생성파일이름]

설치한 package.json파일을 통해 어떤게 설치되었는지 확인할 수 있다.

npm start는 리액트 앱을 실행시키는 명령어이다.

jsx문법

• return안에 html 사용하듯이 사용하면 된다.
  • 기존의 문법

    ...
    function App(){
        return React.createElement("div", null, "Hello 리액트!!",
        React.createElement("p", null, "반갑습니다."));
    }

    jsx 문법

    function App(){
      return {
        <div className="App-header">
          <h1>Hello 리액트!!</h1>
          <p>반갑습니다.</p>
        </div>
       };
    };

• 위의 App함수 내부에 javascript코드를 넣을 수 있다.
• return 내부에 중괄호를 통해 리터럴 명령어를 입력해줄 수 있다.
• inline style: css를 통해서 스타일을 적용해줄 수 있지만, 코드 내에서 직접 설정해줄 수도 있다.

function App(){
  const style = {
    backgroundColor: 'balck',
    color: 'white',
    fontSize: '48px',
    fontWeigth: 'bold',
    padding: '20px'
  }
  return {
    <div className="App-header">
      <h1 style = {style} >Hello 리액트!!</h1>
      <p>반갑습니다.</p>
    </div>
  };
};

• 닫는 태그를 반드시 사용하거나 self closing해줘야 한다.

<br></br> or <br/>

• 주석문은 중괄호를 통해 만들어 줄 수 있다.

  {/* 주서을 이런식으로 작성해줄 수 있다.*/}
  return {
    <div className="App-header">
    {/* 주서을 이런식으로 작성해줄 수 있다.*/}
      <h1 style = {style} >Hello 리액트!!</h1>
      <p>반갑습니다.</p>
    </div>
  };