React JS7 React 살펴보기 #7 Handling Events React elements에서의 이벤트 처리는 DOM elements에서의 이벤트 처리와 비슷하다. 다만 약간의 문법적인 차이가 있을 뿐이다.React 이벤트는 소문자보다는 카멜 케이스를 이용하여 명명한다.JSX를 이용하여 문자열보다는 함수형의 이벤트 핸들러를 전달한다. HTML의 예는 다음과 같다. Activate Lasers React는 이와 조금 다르다. Activate Lasers 또다른 차이점이라면 React에서는 기본적인 동작을 막기 위해 false를 리턴할 수 없다는 것이다. 대신에 명시적으로 preventDefault를 호출해야 한다. 예를들어 일반적인 HTML에서는 새로운 페이지가 열리는 기본적인 링크 동작을 막기 위해 아래와 같은 코드를 사용한다. Click.. 2017. 4. 20. React 살펴보기 #5 Components and Propscomponent는 UI를 독립적이고 재사용 가능한 부분으로 나누는 개별적인 조각으로 생각할 수 있다. 개념상으로는 component는 JavaScript의 함수와 같다. component는 (“props”라고 불리는)임의의 입력을 받아서 화면에 그려지는 방식을 기술하는 React elements를 리턴해준다. Functional and Class Components가장 간단하게 component를 만드는 방법은 JavaScript 함수를 만드는 것이다.function Welcome(props) { return Hello, {props.name}; } 이 함수는 하나의 “props”라는 데이터를 포함한 객체를 인자로 받아서 React elements를 리턴해주므로 유효.. 2017. 3. 4. React 살펴보기 #4 Redering ElementsElements는 React 애플리케이션을 만드는 가장 작은 구성요소이다. elements는 화면에 보여주고자 하는 것에 대한 표현이다.const element = Hello, world; 브라우저의 DOM elements와 달리 React elements는 일반적인 객체이며 생성하는데 비용이 적게 든다. React DOM은 React elements와 일치하도록 DOM을 업데이트한다.주의 : elements는 더 널리 알려진 개념인 “components”와 혼동할 수 있다. components에 대해서는 다음 장에서 설명할 것이다. Elements는 component가 어떻게 구성되는지를 알려주는 요소이며 따라서 다음 장으로 넘거가기 전에 이 장을 반드시 읽을 것을 권한다.. 2017. 2. 17. React 살펴보기 #3 앞서의 두 포스팅은 Quick Start에 있는 내용이었고 이번 번역할 JSX In Depth는 Advanced Guides에 있는 내용이입니다. 하지만 JSX를 한 번에 살펴보는 것이 좋을 것 같아 바로 이 JSX In Depth를 번역합니다.JSX 심화기본적으로 JSX는 단지 React.createElement(component, props, ...children) 함수에 대한 문법적인 편의성만을 제공한다. 아래 JSX 코드를 보자 Click Me 이 코드는 컴파일 후 다음과 같이 바뀐다.React.createElement( MyButton, {color: 'blue', shadowSize: 2}, 'Click Me' ) 만일 태그에 자식이 없다면 아래 코드와 같이 self-closing 태그(/>).. 2017. 2. 11. React 살펴보기 #2 JSX 소개 아래 변수 선언을 살펴보자 const element = Hello, world!; 조금은 우스꽝스럽게도 보이는 이 문법은 문자열도 아니고 그렇다고 HTML도 아니다. 이것은 JSX라고 불리는 javascript의 확장 문법이다. React를 이용하여 UI를 표현할 때 JSX를 사용하는 것을 권장한다. JSX는 템플릿 언어를 연상시키기도 하지만 javascript의 모든 기능을 사용할 수 있다. JSX는 React의 “elements”를 생성한다. “elements”를 DOM 구조에 렌더링하는 과정은 다음 장에서 살펴볼 것이고 여기에서는 React를 시작하는데 필요한 JSX의 기본적인 내용을 살펴볼 것이다. Embedding Expressions in JSX 중괄호({})를 이용하면 어떠한 j.. 2017. 2. 6. React 살펴보기 #1 React 개요 (이 글은 Till60 카테고리에 포함되었던 내용인데 글의 성격상 React 번역 부분만 따로 옮겨온 것입니다.) 아래 내용은 React 공식 홈페이지의 메인 페이지 내용을 의역한 것이다.React는 UI의 상호작용을 보다 쉽게 처리할 수 있는데, 변경된 데이터와 관련된 내용만을 업데이트 하고 렌더링 하는 방식으로 이를 효율적으로 수행한다. 이러한 방식은 결국 예측 가능한 코드를 만들 수 있게 하고 따라서 디버깅이 쉬워진다.자신의 상태를 관리할 수 있는 캡슐화된 컴포넌트를 만듦으로써 복잡한 UI를 쉽게 구성할 수 있으며이러한 로직을 자바스크립트로 작성하기 때문에 다양한 데이터 형식을 쉽게 전달할 수 있고 또 DOM에 의존하지 않고 상태를 유지할 수 있다.React는 특정한 기술 스택에 의.. 2017. 2. 6. React 살펴보기 React 개요 지난 시간까지 mongoDB 모델링을 가볍게, 아~주 가볍게 살펴보았다.그리고 몇차례에 걸쳐 수정했으나 여전히 변경의 여지가 남아있는 찜찜한 상태로 글을 마쳤다.일단 현 상태로도 정상적으로 기능은 하기에 mongoDB에 대한 깊은 내용은 좀 더 뒤로 미루고코드가 더 복잡해지기 전에 js쪽 소스들을 React로 conversion 하고자 한다. 최초 Till60 개발에 대한 글을 작성했을 때도 언급했듯이 React 역시 처음 다뤄보는 기술이다.그런 만큼 우선은 공식 홈페이지에서 개요라도 집고 넘어가야 할 것 같아 우선 오늘은 공식 홈페이지의 메인페이지 내용을 정리해보고자 한다. 1. 기능 목표 기능적으로는 추가 개발 내용이 없다. 2. 기술 목표 기존에 jQuery와 Bootstrap으로 .. 2017. 1. 31. 이전 1 다음 반응형
