JSX

    바닐라JS(TS)로 리액트 SPA 구현하기 | (6) JSX 구현해보기

    바닐라JS(TS)로 리액트 SPA 구현하기 | (6) JSX 구현해보기

    1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 JSX란? React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 마크업과 로직을 모두 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. JSX도 결국엔 표현식입니다. 컴파일이 끝나면, JSX는 JavaScript 객체로 인식됩니다. 이전 글에서, 우리는 마크업과 해당 엘리먼트 내의 로직을 따로 분리하여 코드를 작성했었습니다. JSX를 구현하여 이를 함께 포함할 수 있도록 해봅시다! JSX를 구현한 후, 우리는 컴포넌트 내 렌더함수에서 다음과 같은 형태로 컴포넌트를 작성하게..