반응형

React/React 완벽 가이드 3

3. Components | 코드 재사용

리액트의 생태계는 실용적이고 중요한 다양한 기능과 개념이 있다. 리액트 애플리케이션에 전체적으로 필요한 한 가지 핵심 개념을 선택한다면 그것은 컴포넌트를 사용하는 것이다. 컴포넌트는 잠재적으로 재사용이 가능한 구성 요소로 리액트 개발자가 생성할 수 있고 차후에 혼합하여 전반적인 UI를 구축할 수 있다. 결국 리액트 애플리케이션은 컴포넌트를 결합하여 만들어지는 것이다. 완벽하게 상호작용하는 유저 인터페이스를 만들기 위해 추가적인 기능과 개념이 필요하지만 컴포넌트는 복잡도와 상관없이, 모든 리액트 애플리케이션에서 사용된다 UI를 여러 컴포넌트의 결합으로 여기는 것은 리액트에서만 적용되는 것이 아닙니다 어느 웹사이트를 방문하든 웹사이트 또는 웹사이트의 몇 가지 주요 빌딩블록을 바로 확인 할 수 있다. 쉽게 말..

2. 리액트의 작동원리 | 바닐라 자바스크립트(명령형), 리액트 (선언형)

index.html 파일엔 페이지 역할을 하는 HTML 요소가 포함되어있다. 리액트에선 index.html 파일에 내용이 없고 섹션 끝에 만 포함되어있다. 왜냐하면 리액트 앱에서는 리액트가 사용자 인터페이스 전체를 렌더링하기 때문이다. 본격적인 내용은 index.js 파일부터 시작한다고 보면된다. 우리가 index.js 파일에서 document.getElementById("root")를 선택해서 가 선택되면 리액트가 이 와 그 내용을 제어하기 시작한다. 그때 중요한게 App.js파일인데, App.js 파일은 말하자면 핵심 코드가 담겨 있는 파일이다. 파일안에 App() 이라는 함수가 있는데. 내용에 특이한 점이 있다. HTML 코드가 잔뜩 들어있는 점이다. 이건 자바스크립트의 기본 기능이 아니다. 기본적..

1. React는 무엇이고, 왜 사용할까? (Virtual DOM)

리액트란 무엇이고 대체 왜 사용할까요? 리액트 공식 웹페이지인 react.dev에 가면 답이 있습니다. 웹 및 네이티브 사용자 인터페이스를 위한 라이브러리라고요. 다시 말해 리액트는 사용자 인터페이스 구축을 위한 라이브러리인 거예요 그게 리액트의 핵심이죠, 나아가서는 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리예요 물론 이건 리액트를 왜 쓰느냐는 질문에는 답이 되지 못해요 그에 대한 답은 리액트를 사용하는 웹페이지에 가보면 있습니다 일례로 넷플릭스가 있죠 이런 웹사이트를 탐색해 보면 보다시피 전환이 매우 부드럽고 즉각적이에요, 새 페이지가 로딩되는 듯한 효과가 전혀 없죠 서버에서 새 페이지를 받을 때까지 기다리지 않아도 돼요 그래서 어떻게 보면 모바일 앱 같기도 해요. 모바일 앱에서는 즉각적인 ..

반응형