JSX란? React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 마크업과 로직을 모두 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. JSX도 결국엔 표현식입니다. 컴파일이 끝나면, JSX는 JavaScript 객체로 인식됩니다. 이전 글에서, 우리는 마크업과 해당 엘리먼트 내의 로직을 따로 분리하여 코드를 작성했었습니다. JSX를 구현하여 이를 함께 포함할 수 있도록 해봅시다! JSX를 구현한 후, 우리는 컴포넌트 내 렌더함수에서 다음과 같은 형태로 컴포넌트를 작성하게 될 것입니다. 위의 구조가 동작될 수 있게끔 JSX를 구현해보도록 하겠습니다. (Header의 props로는 스트링 타입의 와 함수 타입의 를 전달해주도록 하겠습니다.)   1. jsx 함수 기본 구조 우선 jsx 함수는 스트링 배열과 ${}에 포함된 아규먼트를 받아서, 공정을 거쳐 최종적으로 엘리먼트를 반환하게 됩니다. 초기 template은 div 엘리…

컴포넌트와 라우터가 만들어졌으니, 한번 애플리케이션을 띄워봅시다!   src/index.ts   src/pages/Main.ts   src/pages/Sub.ts   src/components/Header.ts state와 props가 잘 동작하는지도 확인해보기 위한 코드도 함께 넣어주었습니다. 한 번 실행시켜 볼까요? 1. BrowserRouter의 경우 2. HashRouter의 경우 HashRouter의 경우 BrowserRouter와 다르게 이 들어가있는 것을 볼 수 있습니다. 두 경우 모두 state와 props가 잘 보여지고 있네요! 지금은 메서드로 string을 반환하여 UI를 그리고 있는데요, 때문에 클릭같은 이벤트도 메서드 내부에서 등록해주고 있는 것을 볼 수 있습니다. 다음 글에서는 jsx를 구현하여 더욱 효율적으로 엘리먼트를 그릴 수 있도록 해봅시다. src/index.ts src/pages/Main.ts src/pages/Sub.ts src/co…

이번 글에서는 BrowserRouter를 구현해보도록 하겠습니다.   1. Route 타입 정의 이는 HashRouter와 동일합니다.   2. Router 구조 라우터 구조 또한 HashRouter의 경우와 똑같이 잡아주도록 하겠습니다. 다만 이번에는 가 아닌 로 네이밍해주었습니다.   3. Class 초기화 당연히 생상자 내부 코드도 동일하겠죠? 최상단 엘리먼트 객체, fallback url, 라우트들을 초기화해주고, 를 실행합니다.   4. hash가 변경될 때의 이벤트 처리 이제부터 HashRouter와 다른 로직이 등장하게 됩니다. HashRouter의 경우 Hash가 변경될 때 이벤트 처리를 해주었지만, BrowserRouter의 경우 history API를 사용합니다. 에서 window 객체의 이벤트 리스너에 핸들러를 등록해줍시다. 여기서 의문이 들 수 있습니다. document 객체의 이벤트 리스너에 라는 이벤트가 있었나? 싶을 텐데요. 맞습니다. document 객…

라우터를 구현하는 대표적인 방법에는 두 가지가 있습니다. 바로 BrowserRouter와 HashRouter인데요, 이 둘의 차이에 대해 잘 모르신다면 아래의 글을 먼저 읽어주세요! [BrowserRouter와 HashRouter, 뭐가 다를까? (feat. React Router)] HashRouter와 BrowserRouter를 모두 구현해 볼 텐데요, 이번 글에서는 HashRouter에 대해 먼저 다루어보도록 하겠습니다.   1. Route 타입 정의 라우트는 path와 해당 path에 해당하는 컴포넌트를 가지는 객체입니다.   2. Router 구조 SPA의 최상단 엘리먼트 객체와 정의된 라우트들을 필수적으로 받게 됩니다. 그리고 이벤트와 라우트를 다루는 여러 메서드를 통해 라우팅을 하게 됩니다.   3. Class 초기화 우선, 라우터 객체가 인스턴스화될 때의 설정을 생성자에서 해주어야겠죠. 최상단 엘리먼트 객체, fallback url, 라우트들을 초기화해주고, 를 실행…

리액트 컴포넌트와 유사한 구조를 class로 만들어 봅시다!   1. Component 구조 target으로는 해당 컴포넌트가 들어갈 Element를 받게 됩니다. 컴포넌트는 부모로부터 받은 props와 스스로 관리하는 state를 가집니다. 컴포넌트 생명주기와 관련된 메서드, 첫 렌더링과 이후 상태가 변경되었을 때의 리렌더링을 위한 메서드, 상태 업데이트와 이벤트 등록과 관련된 메서드를 적어주었습니다. template 메서드에서는 실제 엘리먼트를 그리게 됩니다. 기본값으로는 빈 스트링을 반환하도록 해주었습니다.   2. Class 초기화 우선, 컴포넌트 객체가 인스턴스화될 때의 설정을 생성자에서 해주어야겠죠. 컴포넌트가 들어갈 Element를 받아 등록하고, props도 받아서 등록해줍니다. state는 빈 객체를 할당합니다. setup 메서드에서는 state 초깃값 선언, api 호출 등 컴포넌트가 렌더링되기 전에 일어나야 할 일들을 처리하는 용도입니다. 그 후 컴포넌트를 마…

별도의 SPA 라이브러리 없이 Single page application을 만들어봅시다! 언어는 타입스크립트, 번들러는 웹팩을 사용하도록 하겠습니다. html과 css 웹팩 플러그인도 함께 설치하고, 바벨 트랜스파일러도 설치합시다. 저는 sass를 사용하기 위한 추가적인 설치를 함께 해주었습니다. devDependencies @babel/cli @babel/core @babel/preset-env @babel/preset-typescript babel-loader css-loader html-loader html-webpack-plugin mini-css-extract-plugin sass sass-loader ts-loader typescript webpack webpack-cli webpack-dev-server   1. webpack.config.js   2. tsconfig.json 절대 경로를 alias를 따로 설정해주었습니다.   3. .babelrc   4. index…