React

연재중

리액트 제네시스 1부

회차

88화

최근 업데이트

2025년 11월 11일

왜 '리액트'는 태어나야만 했을까요? 2013년 JSConf에서 세상을 놀라게 하기 전, 페이스북 내부에서는 과연 어떤 일이 벌어지고 있었을까요? 1부는 바로 그 필연적인 '이유'에 대한 이야기입니다. 스파게티 코드의 지옥, 끝없는 버그와의 사투, 그리고 서버 사이드 기술인 XHP의 실험에서 발견한 희미한 빛 한 줄기. 리액트라는 거대한 성을 짓기 전, 반드시 거쳐야 했던 혼돈의 기반 다지기. 그 모든 것의 시작으로 당신을 초대합니다.

리액트 제네시스 1부

회차 목록

코드의 미궁, 페이스북 (2011)

알림 아이콘의 배신

스파게티 코드 속의 사투

구원자인가, 또 다른 족쇄인가? jQuery

DOM, 직접 만지는 것의 위험함

모델(Model)과 뷰(View)의 분리, Backbone.js의 등장

조던 워크, 고요한 관찰자

양방향 데이터 바인딩의 함정

상태는 어디에 있는가?

꼬리에 꼬리를 무는 업데이트 지옥

페이스북의 야심, 타임라인

거대한 도전, 실시간 뉴스피드

PHP의 한계, 그리고 XHP

PHP에 HTML을 심다, XHP의 실험

컴포넌트, 그 희미한 첫 모습

XHP의 성공, 그리고 남겨진 숙제

자바스크립트에서도 이게 가능할까?

조던 워크의 과거, 함수형 프로그래밍

스탠다드 ML, 불변성의 미학

모든 것은 함수다

낡은 지도를 버리기로 결심하다

아이디어의 조각들

함수, UI를 반환하다

UI = render(data)

첫 번째 프로토타입, 그 이름 FaxJS

팩스처럼, 단방향으로만 보낸다

데이터는 위에서 아래로 흐른다

단방향 데이터 흐름의 깨달음

거대한 질문: 매번 전부 다시 그리면 너무 느리지 않나?

성능이라는 거대한 벽

조던 워크의 역발상

바뀐 부분만 찾아낼 수 있다면...

메모리 속의 가짜 DOM

보이지 않는 설계도, 가상 DOM(Virtual DOM)의 탄생

이전 설계도와 새 설계도의 비교

Diffing 알고리즘, 최소한의 변경점 찾기

동료들의 첫 반응: 미친 짓이야

첫 번째 시연, 작지만 경이로운 움직임

이것은 세상을 바꿀 수도 있겠어

프로젝트에 이름이 필요하다

이름, 그것은 정체성. 리액트(React)라 명명하다

데이터 변화에 반응(React)하는 라이브러리

리액트의 첫 번째 심장, render() 함수

UI를 조립하는 부품, 컴포넌트(Component)

레고 블록처럼, 재사용 가능한 UI

부품을 만드는 설계도, React.createClass()

첫 번째 클래스 컴포넌트의 코드

render() 메서드, 무엇을 그릴지 알려주다

외부에서 받은 데이터, props

props는 부모가 자식에게 주는 선물

props는 절대 바꿀 수 없다 (불변성)

뉴스피드, 리액트의 시험대

좋아요 버튼, 그 자체로 하나의 부품

그런데, 컴포넌트 스스로 변하는 값은 어떻게 다루지?

내부에서 가지는 상태, state의 등장

getInitialState(), 컴포넌트의 첫 기억

props와 state의 차이, 명확한 역할 분담

상태를 바꾸는 유일한 열쇠, setState()

setState()가 호출되면, 마법이 시작된다

render() 함수의 자동 재호출

가상 DOM이 다시 한번 활약할 때

상태 변화가 UI 변화로 이어지는 과정

페이스북 채팅창, 리액트로 다시 태어나다

내부에서의 성공, 그리고 외부 공개에 대한 고민

이것을 세상에 알려야 한다

컴포넌트는 언제 태어나고 언제 사라지는가?

생명주기(Lifecycle)라는 개념의 도입

컴포넌트가 화면에 나타난 직후, 무언가 하고 싶다

탄생의 순간, componentDidMount

서버에서 데이터 가져오기, 최적의 장소

componentDidMount에서 API를 호출하다

비동기 작업과 setState의 조화

소멸의 순간, componentWillUnmount

메모리 누수를 막아라, 뒷정리의 중요성

setInterval을 시작하고, 멈추는 예제

업데이트의 순간들: componentDidUpdate

불필요한 렌더링을 막아라: shouldComponentUpdate

리액트의 성능을 한계까지 끌어올리는 기술