제로하우스

Overview React에서 데이터를 전달하는 방법에 대해서 다룬다. props 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용한다. 컴포넌트의 속성(property)를 의미한다. 성별, 이름처럼 변하지 않는 외부로부터 전달받은 값이다. 상위 컴포넌트로부터 전달받은 값이다. 객체 형태로 어떤 타입의 값도 props에 넣어서 전달할 수 있다. 읽기 전용(read-only)이다. props 사용하기 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다. function Parent() { return ( I am parent. ); }; function Child() { return ( ); }; 2. props를 이용하여 정의된 값과 속성을 전달한다. function Parent() { ..

Overview 이번 글에서는 state와 eventListener 등을 사용하여 React에서 검색 기능을 구현해본다. 검색어를 입력하면 해당 검색어가 내용(tweet.content)에 포함된 더미 ​데이터(dummyTweets)가 표시되게 한다. 더미 데이터는 tweet의 사용자, 내용, 작성일자 등을 포함하고 있다. 준비하기 먼저 간단하게 골격을 만들어준다. Search라는 컴포넌트를 생성하고 검색창과 검색 결과 건수를 표시하는 텍스트, 그리고 결과를 표시할 공간을 만들어준다. //Search.js import React from 'react'; import { dummyTweets } from '../static/dummyData'; // duumy 데이터 import './Search.css';..

Overview 다른 주소에 따라 다른 뷰를 보여주는 과정을 라우팅(Routing)이라고 한다. React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용한다. Major Components Role Component Router 라우터 Router Matchers 경로 매칭 , Router Changers 경로 변경 // 비구조화 할당(destructuring assignment) import { BrowserRouter, Switch, Route, Link} from 'react-router-dom' BrowserRouter 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 한다. Switch, Rout..

Single Page Application What is SPA? 전통적인 웹사이트는 페이지 이동 시 매번 "페이지 전체"를 불러와야 했다. 웹사이트가 보다 복잡해지고 애플리케이션 형태를 가지게 되면서 사용자와 서비스 사이의 상호작용 크게 증가되게 되었고, 이는 트래픽 증가와 사용자 경험의 저하를 야기했다. SPA(Single Page Application)는 업데이트가 필요한 부분만 새로 불러온다. HTML 문서 전체가 아니라 업데이트가 필요한 데이터만 받아, JavaScript가 이 데이터를 조작하여 HTML 요소를 생성하여 화면에 보여주는 방식이다. SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자..

JavaScript XML Overview React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다. 이 문법을 이용해서 React 엘리먼트를 만들 수 있다. 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니기 때문에 Babel을 이용해서 JSX를 JavaScript로 컴파일 해주어야 한다. 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있다. DOM에서 JavaScript를 사용하기 위해서는 JavaScript와 HTML을 연결하기 위한 작업이 필요하지만, React에서는 JSX를 이용해서 DOM 코드보다 더욱 명시적으로 코드를 작성할 수 있다. JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 ..