Study/React8 React 살펴보기 #8 Conditional Rendering React에서는 필요한 기능을 캡슐화한 고유한 컴포넌트를 만들 수 있다. 그리고 애플리케이션의 상태에 따라 이들 중 일부만 렌더링할 수 있다. React에서의 조건부 렌더링은 자바스크립트에서 조건문이 하는 방식과 동일하게 작동한다. 자바스크립트의 if나 조건 연산자같은 연사자들을 이용하여 현재 상태를 표시할 elements를 생성할 수도 있고, React가 거기에 맞춰 UI를 업데이트하도록 할 수도 있다. 아래의 두 component를 살펴보자function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.; } 사용자가 로그인 했는지의.. 2017. 5. 15. 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 살펴보기 #6 State and Lifecycle 이전 섹션 중 하나였던 시계 예제를 되돌아보자. 지금까지 우리는 UI를 업데이트 시키는 단지 한가지 방법만을 배웠다. 렌더링된 출력물을 바꾸기 위해 우리는 ReactDOM.render()를 호출했다. function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); CodePen에서 확인하기 이번 섹션에서는 Clock 컴포넌트를 진짜로 재활용 가능하고 캡슐화된 상태로 만드는 방법을 배울 것이다. 이 새로운 컴포넌트.. 2017. 3. 27. 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. 이전 1 다음 반응형
