CategoryReact (15)

[번역] React의 이벤트 핸들러 네이밍 (Event handler naming in react)

이 글은 Jake Trent의 Event handler naming in react를 번역한 내용입니다.Jake(원작자)의 허락을 받은 후 작성되었으며, 이 글의 모든 저작권은 Jake에게 있습니다.이해의 편의상 의역이 들어가 있습니다.들어가기 전React를 이용하여 작업 시, handler와 event 명명 규칙이 명확하지 않아서 코드가 쓸데없이 보기 힘들어지는 경우가 있습니다.이에 대해 명확히 설명하는 공식 가이드가 마땅히 보이..

[Redux] React + Redux + Express WebApplication Boilerplate

Redux + Express Website BoilerPlateRedux + Express Website BoilerPlateInstallationFeaturesUsing Time Machine Debugging기본 웹 레이아웃으로 구성된 보일러플레이트입니다.라우팅은 react-router v3을 사용합니다.back-end는 express를 사용하고 있으며, front-end는 react+redux를 사용하고 있습니다.브라우저 확장프로그램 redux..

[React] 12. React처럼 생각하기 - 지금까지 배운 걸 이용해 간단한 컴포넌트 만들기

React처럼 생각하기이번 공식문서의 파트 제목은 Thinking in React입니다.아마도 Thinking in C++, Thinking in Java 등 유명한 시리즈가 있는데 이에 대한 오마쥬가 아닌가 싶습니다.React에서의 앱(혹은 컴포넌트 구조) 설계에 대한, 어렵지 않지만 매우 중요한 내용을 설명하고 있습니다.그래서 제목이 Thinking in React?모의 기능을 만들기음악 리스트를 JSON 형식으로 받아서 이를 테이블로 볼 수 있..

[React] 11. Component 간의 합성(Composition)

들어가기에 앞서..이번 공식문서의 파트 제목은 Thinking in React 입니다.아마도 Thinking in C++, Thinking in Java 등 유명한 시리즈가 있는데 이에대한 오마쥬가 아닌가 싶습니다.React에서의 앱(혹은 컴퍼넌트 구조) 설계에 대한, 어렵지않지만 매우 중요한 내용을 설명하고 있습니다.그래서 제목이 Thinking in React?어쩃든 지금까지 배운걸 토대로 간단한 기능을 가진 어플리케이션을 만들어 보겠습니다.합성..

[React] 10. React 상태 올리기 (React Lifting State Up)

같은 state를 공유하는 두개의 컴퍼넌트상태 올리기라는건 언제 쓰는걸 까요?그 이유를 알기 위해서 State를 공유하는 두개의 컴퍼넌트에 대해서 알아보겠습니다.공식문서에서 제공하는 아래 예제를 통해서 설명해 보도록 하겠습니다.화씨와 섭씨를 각각 받을 수 있는 컴퍼넌트가 있다고 합니다.UI는 아래와 같이 노출됩니다.위 스크린샷을 보면 두개의 컴퍼넌트가 있습니다.소스를 한번 보시겠습니다.const scaleNames = {&..

[React] 9. React에서의 Forms (Controlled Component)

Forms우리가 일반적으로 알고 있는 Forms이란 아래와 같은 것 이죠<form>  <label>    Name:    <input type="text" name="name" />  </label>  <input type="submit"&nb..

[React] 8. React에서의 List 생성

List & Key목록을 View에서 표현할 때 주로 List를 사용합니다.Foreach나 For를 사용해서 Element를 만들어 주는게 보통인데 과연 React에서는 어떤식으로 사용을 할까요?React에 대해서 알아보기 전!우선 자바스크립트의 map에 대해서부터 알아 보도록 하겠습니다.자바스크립트 map()const numbers = [1, 2, 3, 4, 5];const&nb..

[React] 7. React에서의 조건부 렌더링

React에서의 조건부 렌더링조건부 렌더링이란 React render시 특정 조건에 따른 동작을 하게 하는 것입니다.사실 그냥 if문 사용과 다를게 없습니다. 이해하기 어렵지 않으실겁니다 하하아래 소스를 참고해보면render() {    const isLoggedIn = this.state.isLoggedIn;     let ..

[React] 6. React 이벤트 처리

React에서의 이벤트 처리React에서는 이벤트를 함수에 연결해줍니다.DOM에 onclick을 사용해서 처리하는 것과 비슷하게 사용합니다.주의해야 할 특징으로는 아래와 같이 있습니다.이벤트는 camelCase를 사용합니다. (onclick X -> onClick O){}(이벤트처리기)로 함수이름를 전달합니다.이벤트 사용아래 코드 보시면 그 차이를 한눈에 보실 수 있습니다.//Javascript onclick event&nbs..

[React] 5. State와 Life Cycle

State와 LifeCycle오늘은 Status와 생명주기에 대해서 알아보려고 합니다.하지만 그전에 지난 소스를 클래스화 하는것 부터 시작해 봅시다.지난 포스트 중 시간이 바뀌는 소스가 기억나시나요3번 렌더링 요소 포스트입니다 내용은 아래 링크로 보실 수 있습니다.소스보기데모보기tick메서드를 호출해서 계속 렌더링 시켜주는 소스였죠?function tick() {  const element =&n..

[React] 4. Component 와 Props란?

Components와 PropsCompoenet란컴퍼넌트는 각 부분을 재사용 가능한 조각으로 UI를 나눈 것과 같습니다.리액트에서의 컴퍼넌트는 자바스크립트 함수와 같습니다.컴퍼넌트는 input으로 Props를 받고 화면에 표시할 element를 반환해 줍니다.Welcome이라는 컴퍼넌트를 만들어 보겠습니다function Welcome(props){    return <h1>Hello,&..

[React] 3. 렌더링 요소 (Rendering Elements)

렌더링 요소 - Rendering Elements우리는 이전 포스트를 통해서 JSX를 이용해 렌더링 요소를 만들어봤습니다.const element = <h1>Hello, world</h1>;네 이겁니다DOM에 Element를 렌더링ReactDOM을 사용하면 Elements를 DOM에 렌더링 할 수 있습니다.ReactDOM.render();을 이용해서 넣어줍시다!<div id="r..