본문 바로가기
반응형

2017/06/138

[ReactJS] 리스트와 키(Lists and Keys) 리스트와 키(Lists and Keys) 123const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2); console.log(doubled);Colored by Color Scriptercs 먼저, 자바스크립트를 리스트로 변환하는 것을 보자위의 코드를 사용하면 map() 함수를 사용하여 숫자 배열을 가져와서 두배로 늘릴수 있다.map()에 의해 반환 된 새로운 배열을 double 변수에 할당하고 그것을 기록한다.따라서 콘솔에는 [2,4,6,8,10]이 출력된다.리액트에서 엘리먼트를 리스트에 변환하는 것은 이것과 가의 동일하다 여러 컴포넌트 랜더링 12345const numbers = [1, 2, 3, 4, 5].. 2017. 6. 13.
[ReactJS] 조건부 랜더링(Conditional Rendering) 조건부 랜더링(Conditional Rendering) 1234567function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.;}Colored by Color Scriptercs 리액트에서는 필요한 동작을 캡슐화하는 컴포넌트를 만들 수 있다.그런 다음 애플리케이션의 state에 따라 일부만 랜더링 할 수 있다. 리액트의 조건부 랜더링은 자바스크립트에서와 동일하게 동작한다.if와 같은 자바스크립트의 조건부 연산자를 사용하여 현재 state를 나타내게하는 엘리먼트를 만들고리액트가 UI를 업데이트 하여 일치하도록 한다. 사용자의 로그인 여부를 출력하는 위의 두 컴포넌트를 만.. 2017. 6. 13.
[ReactJS] 이벤트 핸들링(Event Handling) 이벤트 핸들링(Event Handling) 1234567 Activate Lasers Activate Laserscs 리액트 엘리먼트를 사용해서 이벤트를 처리하는 것은 DOM 엘리먼트에서 이벤트를 처리하는 것과 매우 유사하다1) 반응 이벤트는 소문자가 아니라 Camel Case를 사용한다.2) JSX에서는 문자열이 아닌 이벤트 처리기로 함수를 전달한다. 예를 들어 첫번째는 기존에 HTML 에서 이벤트를 처리하는 방식이었다.두번째는 JSX에서 이벤트를 처리하는 방식인데 중괄호 안에 Camel Case로 이벤트를 명시하게된다. 1234567891011121314151617 Click me function ActionLink() { function handleClick(e) { e.preventDefault(.. 2017. 6. 13.
[ReactJS] State와 라이프 사이클 State와 라이프 사이클 지금까지 우리는 랜더링을 업데이트하는 한가지 방법만을 배웠다.바로 ReactDom.render()를 호출하여 랜더링된 출력을 변경하는 것이다.이번 포스팅에서는 앞서 만든 시계 예제를 재사용가능하고 캡슐화 시키는 방법에 대해서 알아볼 것이다.변경 후에는 저절로 시간이 변경될때마다 자동으로 랜더링 될 것이다. 1234567891011121314151617function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. );} function tick() { ReactDOM.render( , document.getElementById('root') );} setInterval(tick, 100.. 2017. 6. 13.
반응형

티스토리툴바