1. 개요
- 인스타그램이나 넷플릭스를 쓰다 보면, 링크를 눌러도 화면이 깜빡이며 새로고침되는 일 없이 필요한 부분만 부드럽고 자연스럽게 바뀝니다.
이렇게 한 페이지 안에서 화면을 갈아 끼우며 동작하는 웹을 SPA(Single Page Application)라고 부르는데, 이런 SPA를 만들 때 가장 널리
쓰이는 도구가 바로 React입니다. React는 2013년 페이스북(현 메타)이 공개한 UI 라이브러리입니다. 공개된 지 10년이 넘은 지금은 웹 프
론트엔드 개발에서 당연하다는 듯이 React를 선택할 만큼, 명실상부한 표준으로 자리 잡았습니다.
2. React 이전 화면을 손으로 고치던 시절
- React가 왜 필요한지 이해하려면, React가 없던 시절의 웹 개발을 먼저 봐야 합니다. 웹 페이지의 화면은 DOM(Document Object Model)
이라는 구조로 이루어져 있습니다. 브라우저가 HTML 문서를 읽어서 제목, 버튼, 이미지 같은 화면의 모든 요소를 나무(Tree) 모양으로 정리해
둔 것인데, JavaScript는 이 DOM에서 원하는 요소를 찾아 직접 고치는 방식으로 화면을 바꿔 왔습니다.
- 간단해 보이지만, 화면이 복잡해지면 이야기가 달라집니다. 예를 들어 쇼핑몰 장바구니에 상품이 하나 추가되면 목록에 행을 추가하고,
상단의 개수 배지를 갱신하고, 합계 금액을 다시 계산해서 바꾸고, "장바구니가 비어 있습니다"라는 안내 문구는 숨겨야 합니다. 데이터는
하나 바뀌었는데 손봐야 할 화면 조각은 여러 곳입니다. 이 중 하나라도 수정하지 않으면 버그가 생깁니다.
- 즉 기존 방식에서는 무엇이 바뀌면 어디를 어떻게 고쳐야 하는지를 개발자가 전부 기억하고 직접 수정해야 했습니다. 이런 방식을 명령형
(imperative) 프로그래밍이라고 부릅니다.
3. React의 핵심 아이디어 - 화면은 데이터를 그린 결과물이다
- React는 이 문제를 관점의 전환으로 풀었습니다.
- 엑셀에 익숙하다면 이렇게 생각해도 좋습니다. 합계 셀에 수식을 한 번 넣어 두면, B열의 값이 바뀔 때마다 합계는 자동으로 갱신됩니다. 합계
셀의 값을 매번 직접 고쳐 넣는 경우는 드뭅니다. React에서의 화면이 바로 이 합계 셀입니다. 화면과 데이터의 관계를 수식처럼 정의해 두면,
원본 데이터가 바뀔 때 화면이 따라 바뀝니다. 이때 화면의 근거가 되는 데이터를 React에서는 State(상태)라고 부릅니다. 장바구니의 상품
목록, 로그인 여부, 검색창의 입력값처럼 시간에 따라 변하면서 화면에 영향을 주는 데이터가 모두 State입니다.
- 일반 변수와 State의 차이는 React가 지켜보고 있는가 입니다. 일반 변수는 값이 바뀌어도 React가 알아차리지 못해 화면에 반영되지 않습니
다. 반면 State는 반드시 전용 함수를 통해서만 바꾸게 되어 있고, 이 함수가 호출되는 순간 React는 "데이터가 바뀌었으니 화면을 다시 그려야
한다"는 신호로 받아들입니다. 엑셀로 치면 메모장에 적어 둔 숫자가 아니라, 수식이 참조하고 있는 셀에 들어 있는 값이 State인 셈입니다. 그래
서 React 개발의 상당 부분은 "이 화면의 State가 무엇인가"를 정하는 일이라고 해도 과언이 아닙니다.
4. 컴포넌트 - 화면을 블록으로 조립한다
- 컴포넌트(Component)는 화면 전체를 한 덩어리로 만들지 않고, 독립적인 조각들로 나눠서 조립하는 방식입니다. 예를 들어 게시판 화면이라면
이렇게 나눌 수 있으며, 나누면 두 가지 이점이 생깁니다.
• 재사용 : 컴포넌트를 하나 만들어 두면, 글이 10 개든 100 개든 같은 블록을 반복해서 찍어 냅니다.
공지사항 게시판과 자료실 게시판이 같은 컴포넌트를 공유할 수도 있습니다.
• 분업과 유지보수 : 검색창에 문제가 생기면 검색창 컴포넌트만 열어 보면 됩니다. 수정의 영향 범위가 블록 단위로 좁혀집니다.
- 실제 React 프로젝트의 개발은 이런 블록을 만들고 조합하는 일의 연속입니다.
5. JSX - 컴포넌트를 그리는 문법
- 그렇다면 컴포넌트는 실제 코드로 어떻게 생겼을까요. 버튼을 누른 횟수를 세는 간단한 컴포넌트입니다.
주목할 점은 두 가지입니다.
첫째, JavaScript 코드 안에 HTML처럼 생긴 문법이 들어 있습니다. 이것이 JSX입니다. "이 컴포넌트의 화면은 이렇게 생겼다"를 눈에 보이는
그대로 적기 위한 문법으로, HTML과 거의 같게 생겼지만 실제로는 JavaScript입니다. 그래서 {count}처럼 중괄호로 데이터를 화면 안에 끼워
넣을 수 있습니다. 참고로 브라우저는 JSX를 직접 이해하지 못하기 때문에, 실행 전에 빌드 도구가 순수 JavaScript로 변환하는 과정을 거칩니다.
둘째, 버튼의 코드를 직접 찾아서 고치는 부분이 없습니다. setCount로 count 값만 바꾸면, 화면 갱신은 React가 알아서 처리합니다. 앞서 말한
선언형이 코드에서는 이렇게 나타납니다.
6. Virtual DOM - 바뀐 부분만 골라서 반영한다.
- 여기서 한 가지 의문이 생길 수 있습니다. 데이터가 바뀔 때마다 React가 화면을 새로 그린다면, 오히려 느려지지 않을까? React는 실제 화면에
손대기 전에 메모리 위의 가상 화면(Virtual DOM)에 먼저 그려보고, 이전 모습과 비교해서 실제로 달라진 부분만 진짜 DOM에 반영합니다.
장바구니에 상품이 하나 추가됐다면 화면 전체가 아니라 목록의 새 행과 개수 배지만 갱신되는 식입니다. 이 부분의 자세한 원리는자료실에 올라
와 있는 "DOM, Virtual DOM" 글에 잘 정리되어 있으니 함께 읽어 보시길 권합니다.
7. 정리
• React 는 2013 년 공개된 이후 웹 프론트엔드의 명실상부한 표준이 된 UI 라이브러리입니다.
• 기존 방식(명령형)은 데이터가 바뀔 때마다 개발자가 일일이 코드를 수정해야 했습니다.
• React(선언형)는 "이 데이터일 때 화면은 이런 모습"이라고 선언해 두면, 데이터 변경 시 화면 갱신을 알아서 처리합니다. 이때 화면의 근거가
되는 데이터가 State 입니다.
• 화면은 컴포넌트 단위로 조립하며, 재사용과 유지보수에 유리합니다.
• JSX 는 컴포넌트의 생김새를 HTML 처럼 적을 수 있게 해 주는 문법이고, 실제 화면 갱신은 Virtual DOM 을 통해 바뀐 부분만 반영됩니다.
⭐발표자 : 차기석님
1. 개요
- 인스타그램이나 넷플릭스를 쓰다 보면, 링크를 눌러도 화면이 깜빡이며 새로고침되는 일 없이 필요한 부분만 부드럽고 자연스럽게 바뀝니다.
이렇게 한 페이지 안에서 화면을 갈아 끼우며 동작하는 웹을 SPA(Single Page Application)라고 부르는데, 이런 SPA를 만들 때 가장 널리
쓰이는 도구가 바로 React입니다. React는 2013년 페이스북(현 메타)이 공개한 UI 라이브러리입니다. 공개된 지 10년이 넘은 지금은 웹 프
론트엔드 개발에서 당연하다는 듯이 React를 선택할 만큼, 명실상부한 표준으로 자리 잡았습니다.
2. React 이전 화면을 손으로 고치던 시절
- React가 왜 필요한지 이해하려면, React가 없던 시절의 웹 개발을 먼저 봐야 합니다. 웹 페이지의 화면은 DOM(Document Object Model)
이라는 구조로 이루어져 있습니다. 브라우저가 HTML 문서를 읽어서 제목, 버튼, 이미지 같은 화면의 모든 요소를 나무(Tree) 모양으로 정리해
둔 것인데, JavaScript는 이 DOM에서 원하는 요소를 찾아 직접 고치는 방식으로 화면을 바꿔 왔습니다.
- 간단해 보이지만, 화면이 복잡해지면 이야기가 달라집니다. 예를 들어 쇼핑몰 장바구니에 상품이 하나 추가되면 목록에 행을 추가하고,
상단의 개수 배지를 갱신하고, 합계 금액을 다시 계산해서 바꾸고, "장바구니가 비어 있습니다"라는 안내 문구는 숨겨야 합니다. 데이터는
하나 바뀌었는데 손봐야 할 화면 조각은 여러 곳입니다. 이 중 하나라도 수정하지 않으면 버그가 생깁니다.
- 즉 기존 방식에서는 무엇이 바뀌면 어디를 어떻게 고쳐야 하는지를 개발자가 전부 기억하고 직접 수정해야 했습니다. 이런 방식을 명령형
(imperative) 프로그래밍이라고 부릅니다.
3. React의 핵심 아이디어 - 화면은 데이터를 그린 결과물이다
- React는 이 문제를 관점의 전환으로 풀었습니다.
- 엑셀에 익숙하다면 이렇게 생각해도 좋습니다. 합계 셀에 수식을 한 번 넣어 두면, B열의 값이 바뀔 때마다 합계는 자동으로 갱신됩니다. 합계
셀의 값을 매번 직접 고쳐 넣는 경우는 드뭅니다. React에서의 화면이 바로 이 합계 셀입니다. 화면과 데이터의 관계를 수식처럼 정의해 두면,
원본 데이터가 바뀔 때 화면이 따라 바뀝니다. 이때 화면의 근거가 되는 데이터를 React에서는 State(상태)라고 부릅니다. 장바구니의 상품
목록, 로그인 여부, 검색창의 입력값처럼 시간에 따라 변하면서 화면에 영향을 주는 데이터가 모두 State입니다.
- 일반 변수와 State의 차이는 React가 지켜보고 있는가 입니다. 일반 변수는 값이 바뀌어도 React가 알아차리지 못해 화면에 반영되지 않습니
다. 반면 State는 반드시 전용 함수를 통해서만 바꾸게 되어 있고, 이 함수가 호출되는 순간 React는 "데이터가 바뀌었으니 화면을 다시 그려야
한다"는 신호로 받아들입니다. 엑셀로 치면 메모장에 적어 둔 숫자가 아니라, 수식이 참조하고 있는 셀에 들어 있는 값이 State인 셈입니다. 그래
서 React 개발의 상당 부분은 "이 화면의 State가 무엇인가"를 정하는 일이라고 해도 과언이 아닙니다.
4. 컴포넌트 - 화면을 블록으로 조립한다
- 컴포넌트(Component)는 화면 전체를 한 덩어리로 만들지 않고, 독립적인 조각들로 나눠서 조립하는 방식입니다. 예를 들어 게시판 화면이라면
이렇게 나눌 수 있으며, 나누면 두 가지 이점이 생깁니다.
• 재사용 : 컴포넌트를 하나 만들어 두면, 글이 10 개든 100 개든 같은 블록을 반복해서 찍어 냅니다.
공지사항 게시판과 자료실 게시판이 같은 컴포넌트를 공유할 수도 있습니다.
• 분업과 유지보수 : 검색창에 문제가 생기면 검색창 컴포넌트만 열어 보면 됩니다. 수정의 영향 범위가 블록 단위로 좁혀집니다.
- 실제 React 프로젝트의 개발은 이런 블록을 만들고 조합하는 일의 연속입니다.
5. JSX - 컴포넌트를 그리는 문법
- 그렇다면 컴포넌트는 실제 코드로 어떻게 생겼을까요. 버튼을 누른 횟수를 세는 간단한 컴포넌트입니다.
주목할 점은 두 가지입니다.
첫째, JavaScript 코드 안에 HTML처럼 생긴 문법이 들어 있습니다. 이것이 JSX입니다. "이 컴포넌트의 화면은 이렇게 생겼다"를 눈에 보이는
그대로 적기 위한 문법으로, HTML과 거의 같게 생겼지만 실제로는 JavaScript입니다. 그래서 {count}처럼 중괄호로 데이터를 화면 안에 끼워
넣을 수 있습니다. 참고로 브라우저는 JSX를 직접 이해하지 못하기 때문에, 실행 전에 빌드 도구가 순수 JavaScript로 변환하는 과정을 거칩니다.
둘째, 버튼의 코드를 직접 찾아서 고치는 부분이 없습니다. setCount로 count 값만 바꾸면, 화면 갱신은 React가 알아서 처리합니다. 앞서 말한
선언형이 코드에서는 이렇게 나타납니다.
6. Virtual DOM - 바뀐 부분만 골라서 반영한다.
- 여기서 한 가지 의문이 생길 수 있습니다. 데이터가 바뀔 때마다 React가 화면을 새로 그린다면, 오히려 느려지지 않을까? React는 실제 화면에
손대기 전에 메모리 위의 가상 화면(Virtual DOM)에 먼저 그려보고, 이전 모습과 비교해서 실제로 달라진 부분만 진짜 DOM에 반영합니다.
장바구니에 상품이 하나 추가됐다면 화면 전체가 아니라 목록의 새 행과 개수 배지만 갱신되는 식입니다. 이 부분의 자세한 원리는자료실에 올라
와 있는 "DOM, Virtual DOM" 글에 잘 정리되어 있으니 함께 읽어 보시길 권합니다.
7. 정리
• React 는 2013 년 공개된 이후 웹 프론트엔드의 명실상부한 표준이 된 UI 라이브러리입니다.
• 기존 방식(명령형)은 데이터가 바뀔 때마다 개발자가 일일이 코드를 수정해야 했습니다.
• React(선언형)는 "이 데이터일 때 화면은 이런 모습"이라고 선언해 두면, 데이터 변경 시 화면 갱신을 알아서 처리합니다. 이때 화면의 근거가
되는 데이터가 State 입니다.
• 화면은 컴포넌트 단위로 조립하며, 재사용과 유지보수에 유리합니다.
• JSX 는 컴포넌트의 생김새를 HTML 처럼 적을 수 있게 해 주는 문법이고, 실제 화면 갱신은 Virtual DOM 을 통해 바뀐 부분만 반영됩니다.
⭐발표자 : 차기석님