반응형 분류 전체보기340 [ReactJS] 튜토리얼(Tutorial) - 4 튜토리얼(Tutorial) - 4 클릭 이벤트와 state 123456789class Square extends React.Component { render() { return ( alert('click')}> {this.props.value} ); }}Colored by Color Scriptercs 이제 다음 단계로 넘어가 Square컴포넌트를 클릭 했을때 X로 채워지는 이벤트를 등록해보자우선 이벤트 등록을 위해 render 메소드 안에 리턴되는 버튼 태그를 위와 같이 변경 해야한다.X로 채워지기전에 클릭 이벤트가 제대로 동작하는지 확인하는 테스트 코드이다.코드를 수정하면, Square 컴포넌트를 클릭하면 'click'이라는 alert이 뜨게 된다.=>는 ES6에서 사용되는 arrow function.. 2017. 6. 10. [ReactJS] 튜토리얼(Tutorial) - 3 튜토리얼(Tutorial) - 3 시작하기 본격적으로 틱택토 게임 작성을 해보자튜토리얼 1에서 모든 과정을 마쳤으면 틱택토의 기본 뼈대가 생성되었을 것이다.CSS 까지 작성되었기 때문에 디자인을 제외한 기능에만 집중 하면 된다. index.js 코드를 보면 다음과 같은 3개의 컴포넌트로 구성되었다는것을 알 수 있다. 1) Square2) Board3) Game Square는 컴포넌트는 하나의 을 랜더링하고, Board 컴포넌트는 9개의 Square를 랜더링 하며,마지막으로 Game 컴포넌트는 Board와 나중에 채워질 placeholder를 랜더링 한다.현재 시점에서는 모든 컴포넌트들이 데이터를 주고 받거나 상호작용하지 않지만, 코드를 개선하여데이터나 인자값을 전송하는 방법에 대해 알아보자 Props를 .. 2017. 6. 10. [ReactJS] 튜토리얼(Tutorial) - 2 튜토리얼(Tutorial) - 2 리액트란 무엇일까? 틱택토 게임을 만들기 앞서서 우리가 그냥 넘어간 리액트의 개념이나 특징에 대해 알아보자.리액트는 사용자 인터페이스를 구축하기 위한 효율적이고 유연한 '자바스트립트 라이브러리'이다.리액트에서는 몇 가지 다른 종류의 컴포넌트들이 있지만 우리는 React.Component를 사용할 것이다. 12345678910111213141516class ShoppingList extends React.Component { render() { return ( Shopping List for {this.props.name} Instagram WhatsApp Oculus ); }} // Example usage: cs 리액트는 컴포넌트 단위로 구성이 되며, 이 컴포넌트의 조.. 2017. 6. 10. [ReactJS] 튜토리얼(Tutorial) - 1 튜토리얼(Tutorial) - 1 다음은 리액트 공식 홈페이지에서 튜토리얼로 올라와있는 틱택토이다.틱택토 게임을 만들어 보면서 리액트의 특징과 주요 기능에 대해 알아보도록 하자 먼저 공식 문서에서는 리액트를 하기 전에 HTML이나 Javascript, 그리고 최근에 출시된 Javascript ES6에 대한 일부 문법을 꼭 숙지해야 리액트를 원활하게 다룰수 있다고 한다.따라서 사전 지식이 없을 경우 사전 학습을 통해 위의 언어를 꼭 배우고 넘어가도록 하자. 리액트 튜토리얼을 진행하기 위해 2가지 방법이 있는데,첫째는 인터넷 브라우저에서 코드를 작성하는 방법이다.이는 Codepen 등의 사이트에서 리액트 환경설정을 통해 코드 작성이 가능하다. 두번째는 개인 컴퓨터 환경(텍스트 에디터)에서 리액트 코드를 작성.. 2017. 6. 10. 이전 1 ··· 26 27 28 29 30 31 32 ··· 85 다음 반응형
