728x90 My Wiki (CodesStates)/React8 (1-4) React 기초 - SPA SPA의 등장 배경, 개념, 장단점 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했다. 예시 그림은 동일한 페이지 전환을 보여주고 있다. 전통적인 웹사이트는 페이지 전체를 로딩하고, SPA는 Menu와 Footer와 같이 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않는다. 전통적인 웹사이트에서는 이와 같이 "페이지 전체를 불러오는 행위"를 보통 깜빡인다고 표현한다. 웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 되었다. 하지만 이때마다 Header 나 Navigation Bar 등과 같이 중복되는 요소들을 매번 불.. 2021. 8. 14. (1-3) React 기초 - Component 컴포넌트로 생각하기 리액트를 이용하면, 각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 이러한 컴포넌트를 여러 개 만들고 조합하여 애플리케이션을 만들 수 있다. 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 한다. 이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있다. 이 계층적 구조(hierarchy)를 트리 구조로 형상화할 수 있다. 한 가지 예시를 들어보겠다. 여러분이 유튜브의 개발자라고 상상해 보고, 컴포넌트 단위로 나눠보자. 상단의 헤더, 화면 중앙의 컨텐츠 리스트. 이렇게 나눈 컴포넌트를 앞서와 같이 다시 트리 구조로 표현해 보자. 먼저 근원이 되는 root 컴포넌.. 2021. 8. 14. (1-2) React 기초 - JSX 활용 JSX 활용: JSX 활용법과 꼭 알아야 할 문법에 대해 알아보자. 주요 JSX 문법에 대해서 알아보자. JSX에서 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 감싸주어야 한다. JSX 규칙 React에서 CSS class 속성을 지정하려면 "className"으로 표기해야 한다. 만약 class로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의해야 한다. JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 한다. 중괄호를 사용하지 않으면 일반 텍스트로 인식한다. React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 한다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식.. 2021. 8. 14. (1-1) React 기초 - JSX JSX: JavaScript 를 확장한 문법 JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아니다. React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다. 이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있다. JSX는 JavaScript가 확장된 문법이지만 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니다. 그렇다면 어떻게 해야 할까? 바로 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 한다. 이때 이용하는 것이 바로 “Babel”이다. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일한다. 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있다. .. 2021. 8. 14. 이전 1 2 다음
