공부하는 블로그

Iterator 반복자(Iterator)는 객체 지향적 프로그래밍에서 배열이나 그와 유사한 자료 구조의 내부 요소를 순회(traversing)하는 객체이다. 즉, 반복자는 배열 객체 내에서 순회하며 저장된 요소에 접근하여 각각의 요소에 원하는 로직을 구현하는(processing) 일반화된 방법을 제공한다. Java에서는 'Iterator()'라는 인터페이스가, React에서는 배열 객체에 내장된 메서드인 'map()'이 반복자의 역할을 수행한다. Array.map() 'arr.map(callback, [thisArg])'의 문법으로 사용된다. 콜백 함수는 새로운 배열의 요소를 생성하는 함수로 다음 세가지 파라미터를 가진다. · currentValue : 현재 처리되고 있는 요소 · index : 현재 처..

Router Props 브라우저와 리액트앱의 라우터를 연결하게 되면 그 결과 라우터가 history api에 접근할 수 있게 되며 각각의 Route와 연결된 컴포넌트에 props로 match, location, history라는 객체를 전달하게 된다. import React from 'react'; import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; import Home from './components/home'; import Community from './components/community'; import Mypage from './components/mypage'; function App() { retu..

이전 포스팅에서 SPA의 한계를 극복하고자 라우터를 이용하여 경로에 알맞은 컴포넌트를 불러오는 방법에 대해 공부했다. React | Router : URL로 페이지 접근하기 Single Page Application(SPA) SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 컴포넌트를 통해 동적으로 다시 작성하여 클라이언트와 소통하는 웹 애플리케이션이다. 필요한 모든 소스.. gongbu-ing.tistory.com 라우터를 이용하여 경로를 설정할 수 있으니 이제 url로 파라미터를 전송하는 것이 가능해진다. path와 query string을 이용하여 파라미터를 전송하여 라우팅된 페이지에서 해당 파라미터를 받아서 사용해보자. Path를 이용한 파라미터 전송(match) 전송 방법..

Single Page Application(SPA) SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 컴포넌트를 통해 동적으로 다시 작성하여 클라이언트와 소통하는 웹 애플리케이션이다. 필요한 모든 소스는 하나의 페이지에 불러와진 후 페이지의 새로고침 없이 동작하게 된다. 그러나, SPA를 기반으로 개발할 때 흔히 겪는 어려움 중 하나는 웹페이지의 라우팅이다. 기본적으로 SPA에서 라우팅을 구현하게 되면 url path가 아닌 현재 어떤 컴포넌트가 렌더링 되어야 하는지 state를 통하여 관리를 한다. 이렇게 되면 다음과 같은 문제가 발생하게 된다. 1. 컴포넌트가 전환되어도 브라우저 주소창의 URL은 고정되어 있기 때문에 특정 페이지에 대한 즐겨찾기 등록이 불가능하다. 2. 뒤로가..

Form Data 처리 HTML의 기본 폼 데이터 제출은 action 속성에 지정된 url로 데이터가 전송되어 해당 페이지로 이동되었지만 페이지 새로고침을 최소화하는 리액트에서는 다른 방식으로 데이터를 전송한다. 리액트에서는 HTML 기본 폼 동작을 막고 자바스크립트 함수로 사용자가 폼에 입력한 데이터에 접근하여 폼의 제출을 처리한다. 예제로 기본적인 회원가입 폼을 만들어보자. 폼이 제출될 때(onSubmit) 실행되는 함수 handleSubmit을 만들었다. 우선 'e.preventDefault()'로 폼이 제출되면서 새로고침되는 것을 방지한다. 'e.target..value'로 제출되는 폼의 각각의 input 데이터를 가져올 수 있다. props로 상위 컴포넌트에서 전달한 메소드인 handleAcco..

Event Handling 리액트에서 이벤트를 처리하는 방식은 DOM에서 처리하는 방식과 몇 가지 문법적 차이를 제외하면 유사하다. 1. 리액트의 이벤트는 소문자가 아닌 캐멀 케이스(camelCase)를 사용한다. 2. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. click! click! 3. 리액트에서는 false를 반환해도 태그의 기본 동작을 방지할 수 없으므로 반드시 preventDefault()를 사용해야 한다. click click 여기서 'e'는 합성 이벤트(Syntheic Event)로 네이티브 이벤트를 감싸는 객체이다. 순수 자바스크립트에서 HTML 이벤트를 다룰 때와 똑같이 사용하면 된다. 기본적으로 자바스크립트에서 클래스 메소드는 바인딩이 되어 있지 않으므로 JSX..

Props & State Props와 State는 리액트의 컴포넌트에서 다루는 데이터로 둘의 차이는 다음과 같다. props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값으로 자식 컴포넌트에서는 props를 받아오기만 하고 받아온 props를 직접 수정할 수는 없다. 그러면 컴포넌트 내부에서 데이터값을 변경해야하면 어떻게 해야할까? 그때 사용되는 것이 state로 state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있는 값이다. Props 컴포넌트에서 변하지 않는 데이터가 필요할 때 사용되며 부모 컴포넌트에서 값을 전달할 때에는 자식 컴포넌트 사용 시 안에 = 'value'를 넣어 값을 설정한다. 전달된 값을 자식 컴포넌트에서 사용할 때에는 render() 메소드 내부에서 { this...