React 입문

Juno

React 핸드북에 오신 것을 환영합니다! 저는 주노이고, 여러분이 여기 와주셔서 기쁩니다. React는 사용자 인터페이스를 만드는 도구이며, 처음부터 알아야 할 중요한 점은 React가 처음부터 끝까지 JavaScript라는 것입니다. 만약 JavaScript가 아직 완전히 익숙하지 않다면, 그것은 완전히 정상이며, 먼저 거기서 편하게 느끼는 것이 좋습니다.

한 번에 하나의 작은 개념씩 나아가겠습니다: 페이지의 한 부분, 여기저기 데이터 조각, 그러다 보면 어떻게 맞춰지는지 천천히 보게 될 것입니다. 여기서 너무 기초적이어서 물어볼 수 없는 것은 없습니다.

아직 JavaScript 핸드북을 읽지 않으셨다면, 거기서 시작해서 다시 돌아오세요. 그러면 React가 훨씬 더 잘 이해될 것입니다.

Juno

React 핸드북에 오신 것을 환영합니다. 저는 에이스이고, 실질적인 내용을 중심으로 진행합니다. React는 사용자 인터페이스를 컴포넌트 중심으로 조직하는 방식입니다: 한 번 만들어서 재사용하는 작고 독립적인 조각들이며, 각각이 자신의 데이터를 담고 있습니다.

처음부터 끝까지 실습 중심으로 진행합니다: 개념을 읽고, 그것으로 컴포넌트를 만들고, 상태를 연결하고, 클릭에 반응하는 것을 봅니다. React는 사용하면서 배우는 라이브러리이므로, 그렇게 배우겠습니다.

Juno

React 핸드북에 오신 것을 환영합니다. 저는 솔이고, 정신 모델과 주의할 점들을 함께 살펴보겠습니다. 핵심은 이것입니다: 특정 데이터 세트에 대해 UI가 어떻게 보여야 하는지 설명하면, React는 그 데이터가 변할 때 다시 렌더링합니다. 이 모델을 제대로 이해하면 React의 대부분이 자연스럽게 따라옵니다.

한 가지 기술은 React가 언제 가치를 제공하는지 아는 것입니다. UI에 실제로 관리할 상태가 있을 때는 많은 이점을 주지만, 필요 없는 복잡성을 추가하기도 합니다. 렌더 모델, 훅 규칙, 추상화가 새어나가는 부분들을 예상하세요. 자세히 읽고 모든 것을 질문하세요, 저를 포함해서요.

페이지가 대화형이 되는 순간, 문제가 나타납니다. 순수 JavaScript에서는 페이지 안의 원하는 요소를 찾아 데이터가 바뀔 때마다 손으로 직접 업데이트해서 화면과 데이터를 동기화합니다. 버튼 하나 둘에는 괜찮습니다. 페이지가 커지면서 상태마다 기억해야 할 수동 업데이트들이 많아지면서 빠르게 깨지기 쉬워집니다. React는 이것을 뒤집어놓습니다: 현재 데이터에 맞춰 UI가 어떻게 보여야 하는지 설명하면, React가 데이터 변경 시 업데이트를 처리합니다.

React는 컴포넌트로 사용자 인터페이스를 만드는 JavaScript 라이브러리이며, 이런 조각들을 조합해서 전체 화면을 구성합니다.

컴포넌트란 무엇인가요?

컴포넌트는 UI의 한 부분을 반환하는 함수입니다. 더 큰 화면은 이런 컴포넌트들을 많이 조합해서 만듭니다. 컴포넌트에서 컴포넌트를 어떻게 작성하고 조합하는지 배웁니다.

JavaScript 핸드북을 이미 공부했다면, 이미 손으로 직접 이것을 어렵게 해본 것입니다. DOM 챕터에서 페이지의 요소를 읽고 변경하는 방법을 배웠고, 이벤트 챕터에서 클릭이나 키 입력에 반응하도록 만들었습니다. React는 정확히 이 개념들을 바탕으로 만들어졌습니다. 앱이 커질수록 이를 더 깔끔하게 표현할 방법을 제공합니다.

한 가지 확실히 할 점: React는 처음부터 끝까지 JavaScript입니다. 컴포넌트는 함수이고, props는 인자이고, 상태는 변수이고, 컴포넌트 내부의 로직은 다른 곳에서 작성하는 것과 같은 언어입니다. 단축길은 없습니다. JavaScript 핸드북을 아직 진행하지 않았다면 거기서 시작하세요. 기초를 다지는 데 걸린 시간이 여기서 직접 나타납니다. 또한 프레임워크란 무엇인가를 읽어서 React 같은 라이브러리가 어디에 위치하고 무엇을 해주는지 더 큰 그림으로 이해하는 것도 좋습니다.

이 핸드북이 어디까지 다루는지 알기 위해 범위를 정리했습니다. React가 무엇인지, 어디서 나왔는지, Vite로 자신의 컴퓨터에서 프로젝트를 시작하는 방법부터 시작합니다. 거기서: 컴포넌트 만들기와 조합하기, JSX로 마크업 작성하기, 스타일링, props로 데이터 전달하기, 키로 리스트 렌더링하기, 상태로 변하는 데이터 관리하기, 이벤트에 반응하기, 조건부 렌더링, 폼 처리하기, 컴포넌트 간 상태 공유하기, useEffect로 사이드 이펙트 실행하기, 서버에서 데이터 가져오기, refs로 DOM에 접근하기, 그리고 더 많은 훅들을 다룹니다. 마지막은 React식 사고, 인터페이스 접근성, 그 다음에 올 것들의 지도로 끝납니다. 이것이 거의 모든 React 앱에서 사용하는 핵심입니다. 라우팅, Next.js, 배포 같은 더 넓은 생태계는 마지막 챕터에서 안내하지만 여기서 깊이 있게 다루지는 않습니다. 기초를 탄탄히 하면 나머지는 훨씬 더 쉬워질 것입니다.

JunoReact는 여전히 JavaScript입니다 React에 대해 편안해질 수 있는 점이 있습니다: 따로 배워야 할 React 언어가 없다는 것입니다. 컴포넌트는 JavaScript 함수이고, props는 그 인자이고, 상태는 저장하는 값입니다. React가 혼동될 때마다, 아래에 있는 순수 JavaScript가 무엇을 하는지 묻는 것이 도움이 됩니다. 왜냐하면 그것이 전부니까요.

JunoReact는 여전히 JavaScript입니다 진행하면서 이것을 명심하세요: React는 이미 작성하는 JavaScript 위에 작은 수의 새로운 개념들, 컴포넌트, JSX, props, 상태, 훅을 더합니다. 나머지는 함수, 배열, 객체, 이벤트가 평소대로 동작하는 것입니다. 컴포넌트가 이상하게 작동할 때, 먼저 순수 JavaScript로 읽는 것이 React만의 답을 찾는 것보다 문제를 해결할 가능성이 높습니다.

JunoReact는 여전히 JavaScript입니다 추상화는 의도적으로 얇게 되어 있습니다. 컴포넌트는 props와 상태의 함수이고 UI의 설명을 반환합니다; React의 일은 그 설명과 DOM을 효율적으로 조정하는 것입니다. 거의 모든 함정, 오래된 클로저, 불필요한 재렌더링, 예상 밖에 발생하는 이펙트는 함수가 매 렌더링마다 다시 실행된다는 것을 잊기 때문에 생깁니다. JavaScript 실행 모델을 머리에 담아두면 React의 동작이 더 이상 놀랍지 않게 됩니다.

여러분의 가이드 만나기

이 핸드북은 세 명의 가이드가 호스팅하며, 여러분이 누가 안내할지 선택합니다. 내용은 모두 같지만, 가이드가 전달하는 목소리를 정하고, 적응되는 페이지에서는 각 섹션의 깊이를 정합니다.

• 주노는 초급 과정을 담당합니다: 따뜻하고 인내심 있으며, 명확한 비유, 아무것도 가정하지 않습니다.
• 에이스는 중급 과정을 담당합니다: 실용적이고 먼저 만들기, 실제로 하는 것으로 곧바로.
• 솔은 Deep Dive를 담당합니다: 구조, 트레이드오프, 그리고 다른 사람들이 건너뛰는 프로덕션 세부사항.

페이지 상단의 선택기에서 언제든 가이드를 바꾸거나, 오른쪽 아래의 Preferences를 열어서 가이드, 언어, 또는 글씨 크기를 변경할 수 있습니다.

준비가 되면, 핸드북이 본격적으로 시작됩니다. 다음 챕터 React란 무엇인가에서는 React가 정말 무엇인지, 어떤 문제를 해결하기 위해 만들어졌는지, 이미 알고 있는 JavaScript와 어떻게 어울리는지 다룹니다.

Scrimba에서 React 강좌 듣기Bob Ziroll과 함께 브라우저에서 여섯 개의 React 프로젝트를 무료로 만드세요.→