Skip to main content

Intro

React

Web app

  • UX 향상
  • HTML 관리 용이
  • 리액트 문법으로 iOS/Android 모바일 앱 제작도 가능
  • 서버와 연동 편리

Web app을 만들 때, React, Angular, Vue 같은 라이브러리를 쓰면 짧고 간결한 코드로 개발이 가능하다.


리액트 문법

  • 예전 문법
class Profile extends React.Component {
  constructor() {
    super();
    this.state = { name : "Kim", age: 20 }
  }
  
  changeName = () => {
    this.setState( { name : "Park"} )
  }
  
  render() {
    return (
      <div>
        <h3>프로필</h3>
        <p>저는 { this.state.name } 입니다.</p>
        <button onClick={ this.changeName }>버튼</button>
      </div>
    )
  }
}

  • 최신
function Profile() {
  let [name, changeName] = useState('Kim');
  return (
    <div>
      <h3>프로필</h3>
      <p>저는 { name } 입니다.</p>
      <button>버튼</button>
    </div>
  )
}

React 설치와 개발환경 셋팅

$ npx create-react-app my-app
$ cd my-app
$ npm start

JSX 기본

className

  • class는 js 예약어
  • 따라서 jsx 내부 태그에 class를 부여할 때는 className을 사용한다.
<div className="App">
</div>

데이터바인딩

  • { 변수명 }

  • 속성에도 적용 가능 (src, id, href, className, ...)

import logo from "./logo.svg";

function App() {
  return (
    <div className="App">
      ...
      <img src={ logo } />
      ...
    </div>
  );
}

style 속성

  • object 자료형으로 입력
  • font-size와 같은 경우 camelCase로 입력
<div style={{ color: "blue", fontSize: "30px" }}>content</div>
  • 위와 같이 사용할 수 있지만 class를 사용하자.