React/기초 (10) 썸네일형 리스트형 props vs state props와 state는 작동 방식을 이해하는 것은 쉬울 수 있지만, 개념적으로 이해하는 것은 약간 어려울 수 있습니다. 둘 다 추상적인 면을 갖고 있고 값이 같아보이지만 역할이 매우 다릅니다. props vs state Ever since we started using React to rebuild our UI at uberVU (now Hootsuite) the #1 developer question has probably been: What's the exact difference between props and state? It's fairly easy to understand how they work—especially when seen in context—but it's also a bit d.. React 데이터 흐름 컴포넌트로 생각합시다 리액트의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이 가장 큰 특징입니다. 페이지를 만들기 이전에, 앱의 프로토타입을 전달받았다면 컴포넌트를 찾고, 그 컴포넌트를 먼저 만들고 다시 페이지를 조립해나갑니다. 즉, 상향식(bottom-up)으로 앱을 만듭니다. 이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋습니다. 그래서 여러분이 기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일입니다. 데이터는 위에서 아래로 흐릅니다 하나의 컴포넌트는 한가지 일만 합니다. 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터 마치 인자(arguments) 혹은 속성(attribu.. 이벤트 처리 리액트의 이벤트 처리(이벤트 핸들링: Event handling) 방식은 DOM의 이벤트 처리 방식과 유사합니다. 단, 몇가지 문법 차이가 있습니다. 리액트에서 이벤트는 소문자 대신 카멜 케이스(camelCase)를 사용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러: Event handler)를 전달합니다. 예를 들어, HTML에서 이벤트 처리 방식이 아래와 같다면, Event 리액트의 이벤트 처리 방식은 아래와 같습니다. Event 리액트에서 이벤트 처리하는 기본 방식은 위와 같습니다. 다음은 자주 사용되는 이벤트 처리에 대한 예시입니다. onChange 와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는데 사용됩니다. 리액트에서는 이러한 변경될 수 있는 입력.. State & useState state란? State는 Toggle Switch나 카운터처럼 컴포넌트 내부에서 변할 수 있는 값입니다. 실제 애플리케이션에서는 쇼핑몰 장바구니를 예로 들어보면, 사용자는 구매할 물건과 당장은 구매하지 않을 물건을 체크박스에 체크하여 구분 짓습니다. 이를 장바구니 내에서의 상태로 구분해 본다면 check 된 상태와 check 되지 않은 상태입니다. 이처럼 컴포넌트 내에서 변할 수 있는 값, 즉 상태는 React state로 다뤄야 합니다. useState 사용법 리액트에서는 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공합니다. useState를 이용하기 위해서는 React로부터 useState를 불러와야 합니다. 상단에 import 키워드로 useState를 불러옵니다. i.. Props props의 특징 컴포넌트의 속성(property)을 의미합니다. props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당합니다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 따라서, 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있습니다. 객체 형태입니다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다. props는 읽기 전용입니다. pro.. props를 통해 컴포넌트에게 값 전달하기 이 글은 벨로퍼트의 리액트 5. props를 통해 컴포넌트에게 값 전달하기 글을 정리한 것입니다. props란? props는 properties의 줄임말입니다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용합니다. props의 기본 사용법 예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name이라는 값을 전달해주고 싶다고 가정해봅시다. 그러면 이렇게 코드를 작성하면 됩니다. App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; 이제 Hello 컴포넌트에서 name값을 사용하고 싶을 땐 어떻게 하면 되는지 알아볼까요.. 와이어프레임 VS 목업 와이어프레임(wireframe) - 인터페이스 구성요소 (레이아웃, UI 등의 뼈대) 와이어프레임은 디자인에 들어가기 전 단계로 선(wire)을 이용해 윤곽선(frame)을 잡는 것을 말합니다. 이 작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있습니다. 기획단계에서 주로 제작되는 것으로, 제품의 모양, 혹은 웹페이지의 개략적인 레이아웃과 UI 요소등에 대한 뼈대를 의미합니다. 인터페이스 디자인을 위한 기본적인 비주얼 가이드. 여기에 시나리오, 컨텐츠 설명 등이 첨부되면 스토리보드가 됩니다. 스토리보드(Story Board) - 구성요소, 기능, 콘텐츠, 이동 흐름 웹서비스의 각 페이지 구성요소나 컨텐츠의 설명 및 페이지간의 이동 흐름 등을 기술한 문서를 말합니다. 목업(Mocku.. React Router SPA는 하나의 페이지를 가지고 있지만, 사실 한 종류의 화면만 사용하지 않습니다. 트위터와 같은 SPA를 예로 들자면, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지, 검색 페이지 등의 화면이 있습니다. 또한 이 화면에 따라 "주소"도 달라집니다. 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."는 의미로 라우팅(Routing) 이라고 합니다. 생활코딩에서는 라우팅, 라우터를 사용자가 어떤 주소로 들어왔을 때, 그 주소에 해당하는 적당한 페이지를 사용자에게 보내주는 것이라고 말했습니다. 하지만, React 자체에 이 기능이 내장되어 있지는 않기 때문에 라이브러리를 사용해야 합니다. 가장 많이 사용하는 라이브러리는 React Router입니다. React Route.. 이전 1 2 다음
