JD의 블로그

리액트 상태 관리 사용자 인터페이스는 콘텐츠 생산자가 콘텐츠를 만들어내기 위해 사용하는 도구다. 콘텐츠 생산자에게 최선의 도구를 만들기 위해서는 데이터를 효율적으로 조작하고 변경하는 방법을 알아야 한다. 컴포넌트 트리는 프로퍼티를 통해 데이터가 흘러갈 수 있는 컴포넌트 계층 구조를 뜻한다. 프로퍼티는 절반을 담당하고, 나머지 절반은 상태(State)가 담당하게 된다. 리액트 애플리케이션의 상태는 데이터에 의해 조종되며 변경될 수 있다. 상태를 조리법 애플리케이션에 도입하면 셰프가 새 조리법을 만들 수 있고, 기존 조리법을 변경하거나 오래된 조리법을 제거할 수도 있다. 상태와 프로퍼티는 서로 관계가 있다. 리액트 애플리케이션을 사용할 때는 이 관계에 기반해 컴포넌트들을 부드럽게 합성해 서로 엮는다. 컴포넌..

JSX를 사용하는 리액트 createElement 함수는 리액트의 동작을 살펴보는 데 좋은 방법이지만 리액트 개발자들이 실제로 해야 하는 일과는 거리가 있다. 우리는 복잡하고 읽기 어려운 자바스크립트 구문 트리를 이리저리 전달하면서 재미있다고 하지 않는다. 리액트를 활용해 효과적으로 일하려면 JSX라는 다른 요소가 필요하다. JSX는 자바스크립트의 JS와 XML의 X를 합친 말이다. JSX는 자바스크립트 코드 안에서 바로 태그 기반의 구문을 써서 리액트 엘리먼트를 정의할 수 있게 해주는 자바스크립트 확장이다. JSX는 단지 복잡한 createElement 보다 편하게 리액트 엘리먼트를 만들 수 있게 해주는 다른 방법이다. 1. JSX로 리액트 엘리먼트 정의하기 페이스북의 리액트 팀은 리액트를 내놓으면서 ..

리액트의 작동 원리 2장에서는 최신 자바스크립트 문법을 배웠고 3장에서는 리액트의 탄생을 이끈 함수형 프로그래밍 패턴을 리뷰했다. 이번 장에서는 리액트가 어떻게 작동하는지 배울 것이다. 리액트를 사용할 때는 JSX로 앱을 만들 가능성이 크다. 그리고 정말 리액트를 이해하고 싶다면 가장 핵심이 되는 단위인 리액트 엘리먼트를 이해할 필요가 있다. 1. 페이지 설정 리액트를 브라우저에서 다루려면 React와 ReactDOM 라이브러리를 불러와야 한다. React는 뷰를 만들기 위한 라이브러리고 ReactDOM은 UI를 실제로 브라우저에 렌더링할 때 사용하는 라이브러리다. 2. 리액트 엘리먼트 HTML는 브라우저가 문서 객체 모델인 DOM(Document Object Model)을 구성하기 위해 따라야 하는 절..

자바스크립트를 활용한 함수형 프로그래밍 자바스크립트 프로젝트에서 함수형 기법의 사용이 점점 늘어나는 중이다. 이번 장에서는 함수형 프로그래밍의 핵심 개념을 몇가지 살펴보고, 자바스크립트에서 함수형 기법을 구현하는 방법을 알아본다. 자바스크립트에서는 변수에 함수를 대입할 수 있고, 함수를 다른 함수에 인자로 넘길 수 있으며, 함수에서 함수를 만들어서 반환할 수 있다. 그래서 함수를 일바넉인 데이터와 마찬가지로 취급하며 일반적인 값과 동일하게 저장하거나 읽어오거나, 애플리케이션에서 흘려보낼 수 있다. 선언적 프로그래밍 선언적 프로그래밍은 필요한 것들 달성하는 과정을 하나하나 기술하는 것보다 필요한 것이 어떤 것인지를 기술하는 것에 더 방점을 두고 애플리케이션의 구조를 세워나가는 프로그래밍 스타일이다. 선언전..

리액트를 공부하기 위해 Learning React를 공부하기 시작했다. 리액트는 Udemy로도 몇 번 보긴 했지만 끝내지 못해서 이 책을 끝내는 것을 목표로 리액트 공부를 다시 시작하기로 했다. 정말 기초부터 제대로 이해하고자 쉬운 내용이지만 다시 정리한다. 리액트를 위한 자바스크립트 자바스크립트의 컴파일링은 코드를 더 많은 브라우저가 이해할 수 있는 다른 버전의 자바 스크립트 구문으로 변환하는 것이다. 이를 도와주는 것이 바로 바벨(Babel)이다. 자바스크립트 컴파일은 보통 웹팩(Webpack)이나 파슬(Parcel)과 같은 자동화된 빌드 도구에 의해 처리된다. 구조 분해(destructuring) 구조 분해를 사용하면 객체 안에 있는 필드 값을 원하는 변수에 대입할 수 있다. const sandwi..