728x90 My Wiki (CodesStates)47 (1-7) React 기초 - props props의 특징 컴포넌트의 속성(property)을 의미한다. props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 따라서, 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다. 객체 형태이다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다. props는 읽기 전용이다. props는 성별이나 .. 2021. 8. 14. (1-6) React 기초 - React Router SPA & Routing SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지 않는다. 예를 들어 Twittler 와 같은 SPA 를 만들 때 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요할 수 있다. 또한 이 화면에 따라 "주소"도 달라질 것이다. 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing) 이라고 한다. 하지만 React 자체에는 이 기능이 내장되어 있지 않다. 우리가 직접 주소마다 다른 뷰를 보여줘야 한다. React SPA에서는 라우팅을 위해 React Router 라는 라이브러리를 가장 많이 사용한다. React Router 활용 React Router의 주요 컴포넌트에 대해 알아보.. 2021. 8. 14. (1-5) React 기초 - Wireframe Wireframe은 디자인에 들어가기 전 단계로 선(wire)를 이용해 윤곽선(frame)을 잡는 것을 말한다. 이 작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있다. 그리고 목업(mockup) 은 데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것을 말한다. 자, 이제 유튜브 개발자인 여러분이 React를 이용해 어떻게 애플리케이션을 만들지 설계를 한다고 상상해 보자. 컴포넌트 기반 개발 방법을 학습하였기 때문에, 페이지를 먼저 만들기 보다는 어떤 컴포넌트를 만들고 이들을 조합할지부터 구상할 계획이다. 먼저 화면 상단의 경우 상단 전체를 아우르는 Header라는 컴포넌트가 있고 그의 자식으로 Search와 Setting이라는 컴포넌트를 만들기로 하였다. .. 2021. 8. 14. (1-4) React 기초 - SPA SPA의 등장 배경, 개념, 장단점 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했다. 예시 그림은 동일한 페이지 전환을 보여주고 있다. 전통적인 웹사이트는 페이지 전체를 로딩하고, SPA는 Menu와 Footer와 같이 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않는다. 전통적인 웹사이트에서는 이와 같이 "페이지 전체를 불러오는 행위"를 보통 깜빡인다고 표현한다. 웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 되었다. 하지만 이때마다 Header 나 Navigation Bar 등과 같이 중복되는 요소들을 매번 불.. 2021. 8. 14. 이전 1 2 3 4 5 6 ··· 12 다음
