Kendrick's Blog

이 글은 Jake Trent의 Event handler naming in react를 번역한 내용입니다.Jake(원작자)의 허락을 받은 후 작성되었으며, 이 글의 모든 저작권은 Jake에게 있습니다. 이해의 편의상 의역이 들어가 있습니다.들어가기 전React를 이용하여 작업 시, handler와 event 명명 규칙이 명확하지 않아서 코드가 쓸데없이 보기 힘들어지는 경우가 있습니다. 이에 대해 명확히 설명하는 공식 가이드가 마땅히 보이지 않아, 여러 글을 찾아봤고 Jake Trent의 포스트를 본 후 많은 도움이 되었습니다. 그렇기에 이 가이드를 준수하라는 내용이 아니며, 이러한 규칙에 대해서 생각하고 참고하시면 좋을 것 같습니다.React의 이벤트 핸들러 네이밍 (Event handler naming ..

React처럼 생각하기이번 공식문서의 파트 제목은 Thinking in React입니다. 아마도 Thinking in C++, Thinking in Java 등 유명한 시리즈가 있는데 이에 대한 오마쥬가 아닌가 싶습니다.React에서의 앱(혹은 컴포넌트 구조) 설계에 대한, 어렵지 않지만 매우 중요한 내용을 설명하고 있습니다.그래서 제목이 Thinking in React?모의 기능을 만들기음악 리스트를 JSON 형식으로 받아서 이를 테이블로 볼 수 있고 필터 할 수 있는 기능의 테이블을 만들어 봅시다.1. UI를 Component 계층 구조로 만들기 위한 준비지금부터 만들 필터 테이블은 아래와 같은 화면으로 구성됩니다.이 화면에 사용될 JSON 데이터는 아래와 같습니다.var MUSIC_DATAS = [..

들어가기에 앞서..이번 공식문서의 파트 제목은 Thinking in React 입니다. 아마도 Thinking in C++, Thinking in Java 등 유명한 시리즈가 있는데 이에대한 오마쥬가 아닌가 싶습니다.React에서의 앱(혹은 컴퍼넌트 구조) 설계에 대한, 어렵지않지만 매우 중요한 내용을 설명하고 있습니다.그래서 제목이 Thinking in React?어쩃든 지금까지 배운걸 토대로 간단한 기능을 가진 어플리케이션을 만들어 보겠습니다.합성과 상속이란?객체지향에서 기능의 재사용을 하기 위해서 사용하는 대표적인 기법입니다.상속 - Inheritance다른 부모클래스를 먼저 만듭니다. 자식클래스는 이 부모클래스를 상속받아서 구현을 정의합니다.is-a 라고도 합니다.합성 - Composition서로..

같은 state를 공유하는 두개의 컴퍼넌트상태 올리기라는건 언제 쓰는걸 까요? 그 이유를 알기 위해서 State를 공유하는 두개의 컴퍼넌트에 대해서 알아보겠습니다.공식문서에서 제공하는 아래 예제를 통해서 설명해 보도록 하겠습니다. 화씨와 섭씨를 각각 받을 수 있는 컴퍼넌트가 있다고 합니다. UI는 아래와 같이 노출됩니다. 위 스크린샷을 보면 두개의 컴퍼넌트가 있습니다.소스를 한번 보시겠습니다.const scaleNames = { c: 'Celsius', f: 'Fahrenheit'}; class TemperatureInput extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bi..

Forms우리가 일반적으로 알고 있는 Forms이란 아래와 같은 것 이죠 Name: submit을 클릭하면 form의 지정된 url로(없으면 현재페이지로) 이동 될 것입니다.만약 특정 기능을 수행하게 하고 싶다면, 자바스크립트 기능을 추가해서 처리 할 수 있겠죠.이번 포스트에서는 React에서 input, textarea, select등의 요소를 어떻게 제어할지 알아보겠습니다.Controlled ComponentControlled Component는 State에 따라서 값을 갱신하는 컴퍼넌트입니다.value에 할당된 state값을 직접 갱신하고 전달하기 때문에 기본적으로 권장하는 컴퍼넌트 사용방식입니다.Uncontrolled ComponentComponent에서 제어를 관리하지않는 Component입니다..

List & Key목록을 View에서 표현할 때 주로 List를 사용합니다.Foreach나 For를 사용해서 Element를 만들어 주는게 보통인데 과연 React에서는 어떤식으로 사용을 할까요?React에 대해서 알아보기 전!우선 자바스크립트의 map에 대해서부터 알아 보도록 하겠습니다.자바스크립트 map()const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled) //[2, 4, 6, 8, 10] map과 forEach는 거의 동일한데 다른 점은 같은 길이의 배열이 나오냐 안 나오냐의 차이가 있습니다. 위 예제를 예로들면 doubled변수에 map함수는 동일한 길이의 결과값..

React에서의 조건부 렌더링조건부 렌더링이란 React render시 특정 조건에 따른 동작을 하게 하는 것입니다.사실 그냥 if문 사용과 다를게 없습니다. 이해하기 어렵지 않으실겁니다 하하아래 소스를 참고해보면render() { const isLoggedIn = this.state.isLoggedIn; let button = null; if (isLoggedIn) { button = ; } else { button = ; } return ( {button} );}isLoggedIn 메서드에 따라서 LogoutButton일지 LoginButton 일지 button변수에 할당해 줍니다.그 후 return 시 {button}으로 넣어주면 렌더링 시 isLoggedIn여부에 따라 다른 컴퍼넌트가 노출되겠죠?..

React에서의 이벤트 처리React에서는 이벤트를 함수에 연결해줍니다. DOM에 onclick을 사용해서 처리하는 것과 비슷하게 사용합니다. 주의해야 할 특징으로는 아래와 같이 있습니다.이벤트는 camelCase를 사용합니다. (onclick X -> onClick O){}(이벤트처리기)로 함수이름를 전달합니다.이벤트 사용아래 코드 보시면 그 차이를 한눈에 보실 수 있습니다.//Javascript onclick event Activate Lasers //React onClick Event Activate LasersDOM에 onclick을 사용하듯이 리액트에서는 onClick에서 전처리기를 통해 함수명을 전달해 줍니다.이벤트 취소또다른 차이로는 이벤트 취소가 있습니다.자바스크립트에서 a태그 사용 시, ..

State와 LifeCycle오늘은 Status와 생명주기에 대해서 알아보려고 합니다.하지만 그전에 지난 소스를 클래스화 하는것 부터 시작해 봅시다.지난 포스트 중 시간이 바뀌는 소스가 기억나시나요 3번 렌더링 요소 포스트입니다 내용은 아래 링크로 보실 수 있습니다.소스보기 데모보기tick메서드를 호출해서 계속 렌더링 시켜주는 소스였죠?function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') );} setInterval(tick, 1000);위와같은 코드 였습니다.이 단순 무식한? 코드를 캡슐..

Components와 PropsCompoenet란컴퍼넌트는 각 부분을 재사용 가능한 조각으로 UI를 나눈 것과 같습니다.리액트에서의 컴퍼넌트는 자바스크립트 함수와 같습니다. 컴퍼넌트는 input으로 Props를 받고 화면에 표시할 element를 반환해 줍니다.Welcome이라는 컴퍼넌트를 만들어 보겠습니다function Welcome(props){ return Hello, {props.name}}: for ES6class Welcome extends React.Component { render() { return Hello, {this.props.name}; }}두 코드는 props를 받고 React의 Element를 반환한다는 점에서 동일한 기능을 하는 컴퍼넌트 입니다.Component 렌더링우선 W..

렌더링 요소 - Rendering Elements우리는 이전 포스트를 통해서 JSX를 이용해 렌더링 요소를 만들어봤습니다.const element = Hello, world;네 이겁니다DOM에 Element를 렌더링ReactDOM을 사용하면 Elements를 DOM에 렌더링 할 수 있습니다. ReactDOM.render();을 이용해서 넣어줍시다!id: root가 있네요const element = Hello, world;ReactDOM.render( element, document.getElementById('root') // root에 element를 렌더링 시켜줍니다. );ReactDOM은 필요한 것만 업데이트 한다.ReactDOM은 변경되는 부분이 있다면 그 부분만 변경합니다.일반적인 DOM이 아니..

JSX란?JSX의 단어 유래부터 알아봅시다. Javascript + XML을 합쳐서 탄생한 기존 자바스크립트의 확장 문법입니다.그렇다면.. 두가지를 합쳐서 얻는 장점은??개발자가 자바스크립트 내부에 마크업 코드를 작성해 줄 수 있게 해줍니다. 단순히 XML만 아니라 변수나 프로퍼티의 바인딩 기능도 제공합니다JSX 한번 봅시다.ReactDOM.render( Hello, world!, document.getElementById('root'));이전 포스트를 보시면 Render 부분에서 위와 같은 코드를 보셨을 겁니다.h1태그 부분을 따로 변수로 저장해서 아래와 같이 쓸 수 도 있습니다const element = Hello, world!; ReactDOM.render( element, document.getE..