20230512

<< [[20230511]] | [[20230513]]>>

TODO

• 강의 1시간

• 포폴 1시간

---

(강의) 웹게임을 만들며 배우는 React

가독성을 위한 JSX

• js + XML

• XML? Extensible Markup Language HTML과 매우 비슷한 문자 기반의 마크업 언어 참고a

• React.createElement를 이해하기 쉽게 바꿔줌

  • React.createElement는 더이상 실무에서 사용하지 않음

• jsx와 같은 문법은 js에 존재하지 않는 문법 -> 그냥 react만으로는 사용할 수 없음

• babel이라는 라이브러리가 jsx코드를 보면 React.createElement로 변경해줌 -> babel 필요 -> 아래 코드 추가하기

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel"> // jsx가 있는 코드에 type='text/babel' 추가
...
     return (
        <button onClick={() => this.setState({ liked: true })}>
          LIKE
        </button>
      )				
</script>

• jsx에서 js 코드를 사용하려면 중괄호로 무조건 한번 더 감싸줘야함

<button>
{this.state.liked ?'LIKED':'LIKE!'}
</button>

• react17버전과 18버전 구분하기

<script type="text/babel">
  // React 17버전 코드 => 해당코드 사용 시 react 18버전 코드를 사용할 수 없음
   ReactDOM.render(<LikeButton />, document.querySelector('#root'));
  // React 18버전 코드
  ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton />);
</script>