코드 스플리팅 기술에 대해 알아보았다. SPA의 경우, 사용하지 않는 컴포넌트들도 처음에 모두 가져오기 때문에, 초기 페이지가 나타나는데 시간이 SSR 보다 오래 걸린다는 단점이 있다. 이를 해결하기 위한 방법 중 하나가 코드 스플리팅인데, import 를 동적으로 한다는 것으로 보면 될 것 같다. import('./SplitMe').then(result => result.default()); 자바스크립트에서는 위의 방식으로 진행할 수 있다. 리액트에서는 크게 두 가지 방법이 있는데, 클래스형 컴포넌트를 사용해서, state에 로드하는 것과 React.laze 와 Suspense 를 사용하는 것이다. 일단 클래스형 컴포넌트의 사용법은 아래와 같다. class App extends React.Compone..
리액트
리액트 시작 과거 자바스크립트는 웹에서 간단한 연산을 사용하거나 시각적 효과를 주는 단순한 스크립트 언어였지만, 현재 웹 애플리케이션에서 핵심적인 역할을 하고 있습니다. 자신의 영역을 넘어서서 화면에 보여지는 프론트 뿐 아니라 서버도 자바스크립트로 만들 수 있고, 더 나아가서 현재 많은 사람들이 사용하고 있는 슬랙, VSCode와 같은 데스크탑 앱을 만드는데도 자바스크립트가 사용되고 있습니다. 자바스크립트 엔진이 발전하면서 자바스크립트로 큰 규모의 애플리케이션을 만들 수 있게 되었지만, 자바스크립트만 가지고 대규모 애플리케이션을 관리하기는 쉽지 않습니다. 애플리케이션 관리를 조금 더 쉽게 하기 위해 프레임워크가 생겨났고, 대표적인 프레임워크들로 Angular, Backbone.js, Vue.js 등이 있..
5월 초에 우아한 테크러닝 4기에 참가 신청을 하라는 메일을 받았다. 지원 동기 및 두 세가지 정도 질문이 있었고, 나의 리액트 및 타입 스크립트 사용 능력에 대한 설문이 있었다. 리액트는 개인적으로 공부해오긴 했는데, 실무에서 사용하지 않고, 따로 공부하다 보니 내가 작성한 코드가 동작은 하지만, 좋은 코드인지에 대한 확신이 없었고, 타입스크립트는 아직 사용해보지 않았다. 솔직하게 지원 동기에 이러한 내용과 더불어서, 현재 회사에서 AngularJS를 사용해 프로젝트를 진행하는데, 리액트를 사용하며 프로젝트를 하면 이 둘을 비교할 수 있을 것 같았고, 나중에 프로젝트를 진행하게 될 때, 둘의 장단점을 고려하여 프레임워크 또는 라이브러리를 선택할 수 있을 것 같아 지원했다는 내용을 작성해 제출했다. 경력..
이번에는 리액트 공식 사이트의 튜토리얼의 추가 미션 진행해보도록 하자. 추가 미션의 목록은 아래와 같다. 이동 기록 목록에서 특정 형식(행, 열)으로 각 이동의 위치를 표시. 이동 목록에서 현재 선택된 아이템을 굵게 표시. 사각형을 만들 때 하드코딩 대신에 두 개의 반복문을 사용하도록 Board를 다시 작성. 오름차순이나 내림차순으로 이동을 정렬하도록 토글 버튼 추가. 승자가 정해지면 승부의 원인이 된 세 개의 사각형 강조. 승자가 없는 경우 무승부 메시지 표시. 이 미션을 모두 달성한 화면은 아래 사진과 같을 것이다. 빨간 상자는 1번, 주황색은 2번, 노란색은 4번, 초록색은 5번이다. 이동 기록 목록에서 특정 형식(행, 열)으로 각 이동의 위치를 표시 이동 기록 목록을 (행, 열) 형식으로 표현해보..
합성 (Composition) vs 상속 (Inheritance) React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용해 컴포넌트 간에 코드를 재사용하는 것이 좋습니다. 이번 섹션에서 React를 처음 접한 개발자들이 종종 상속으로 인해 부딪히는 몇 가지 문제점과 합성을 사용해 이를 해결하는 방법을 살펴볼 것이다. 컴포넌트에서 다른 컴포넌트를 담기 Sidebar나 Dialog를 생각해보자. 우리는 이 안에 어떤 자식 엘리먼트가 들어와야할지 모든 것을 예상할 수 없다. 이러한 컴포넌트에는 children prop을 사용해 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋다. 화면에 출력할 내용을 prop으로 받는 것이다. 아래 코드를 보자. function FancyBorder(props)..
폼 제어 컴포넌트 (Controlled Componenet) HTML에서 , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. 여기서 눈치챈 사람들도 많을 것이다. 자신의 state를 관리하면 되므로 클래스형 컴포넌트를 사용해 setState()로 상태를 업데이트 하면 된다. "제어 컴포넌트 (controlled component)"는 React에 의해 값이 제어되는 입력 폼 엘리먼트를 말한다. 아래 코드를 보며 제어 컴포넌트를 알아보자. class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange..
