본문 바로가기
반응형

전체 글340

[책] 참을 수 없는 존재의 가벼움 참을 수 없는 존재의 가벼움 볼 때마다 다르게 보이는 것들이 있다. 나에게는 이터널 선샤인, 배트맨 다크나이트, 매트릭스와 같은 영화가 그러했다. 처음에는 무슨말을 하려하는지, 줄거리 파악도 힘들다가, 세월이 지나 아는게 조금씩 쌓이고 많은 경험을 하면서 눈에 보이지 않던것들이 서서히 들어온다. 가끔 음악에서도 이와 같은 경험을 한다. 노랫말을 제대로 듣기도 어렵다가, 시간이 지나면서 천천히 메인 보컬의 목소리에서 백업 베이스, 드럼의 소리까지 선명하게 들려온다. 장황하게 서두를 시작한 것은, 사실 책을 읽었지만 잘 이해가 가지 않았기 때문이다. 심지어 줄거리조차 아귀가 들어맞게 생각이 나지 않는다. 뭔가 글씨는 많은데 머리속에 들어갔다가 줄줄 샌 느낌이다. 프라하의 봄이나, 니체의 회귀 사상, 사랑 등.. 2017. 6. 13.
[ReactJS] State 끌어 올리기(Lifting State Up) State 끌어 올리기(Lifting State Up) 123456function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return The water would not boil.; }Colored by Color Scriptercs 종종 여러 컴포넌트가 동일한 변경 데이터를 반영해야한다.이 때는 가장 가까운 상위 컴포넌트가 state값을 관리하는 것이 좋다. 이번 포스팅에서는 주어진 온도에서 물이 끓는지 여부를 계산하는 온도 계산기를 작성한다코딩은 위의 BoilingVerdict라는 컴포넌트 부터 시작한다.이 컴포넌트는 섭씨 온도를 받아서 물을 끓일만큼 충분한지 출력한다. 12345678910.. 2017. 6. 13.
[ReactJS] 입력폼(Forms) 입력폼(Forms) 1234567 Name: Colored by Color Scriptercs HTML의 폼 엘리먼트는 자연스럽게 내부상태를 유지하기 때문에, 리액트와 조금 다른 방식으로 동작한다.예를 들어, 일반 HTML 형식의 양식은 단일 이름을 허용한다.이와 같은 코드를 리액트에서 사용한다면 동일하게 동작은 한다.그러나 대부분의 경우 form 데이터를 처리하고 사용자가 form에 입력한 데이터에 액세스 할 수 있는 자바스크립트 기능을 가지는 것이 더 편리하다이를 위해 controlled component 를 사용한다. Controlled Component 123456789101112131415161718192021222324252627282930class NameForm extends React.C.. 2017. 6. 13.
[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.
[ReactJS] 컴포넌트와 Props 컴포넌트와 Props 리액트의 가장 큰 장점은 컴포넌트의 조합으로 UI를 짜는 것이다.리액트에서는 컴포넌트를 사용하여 UI를 독립적이고 재사용 가능한 부분으로 분리하며,각 부분을 개별적으로 생각할 수 있다. 개념상 컴포넌트는 javascript의 function과 같다.이 때, 컴포넌트 내부의 props는 임의의 입력을 받아들이고, 무엇이 화면에 나타나야하는지를 설명하는 리액트 엘리먼트를 반환한다. 함수와 클래스 컴포넌트 123function Welcome(props) { return Hello, {props.name}; }Colored by Color Scriptercs 컴포넌트를 가장 쉽게 정의 하는 방법은 function을 사용하는 것이다.이 함수는 하나의 props 객체를 인수로 받아들이고 Rea.. 2017. 6. 12.
[ReactJS] 랜더링(Rendering) 랜더링(Rendering) 엘리먼트는 리액트 어플리케이션에서 가장 작은 단위이다.엘리먼트는 화면에서 보여지는 것에 대한 정보를 가지고 있다.브라우저 엘리먼트인 DOM 엘리먼트와는 달리, 리액트 앨리먼트는 일반 객체이므로 값 싸게 만들수 있다.React DOM은 React 앨리먼트와 일치하도록 DOM을 업데이트 한다. 리액트에서 앨리먼트와 컴포넌트를 헷갈릴수 있는데, 컴포넌트에 대한 자세한 설명은 다음 포스팅에서 다루도록한다.그전에, 간단하게 설명하자면 엘리먼트는 컴포넌트가 무엇인지를 나타낸다고 할 수 있다. 엘리먼트를 DOM에 랜더링 하기 12345const element = Hello, world; ReactDOM.render( element, document.getElementById('root')).. 2017. 6. 12.
반응형

티스토리툴바