반응형 전체 글340 [ReactJS] 튜토리얼(Tutorial) - 8 튜토리얼(Tutorial) - 8 Functional Component 다시 틱택토 게임으로 돌아와서, 우리는 Square 컴포넌트의 constructor를 제거했었다.이로인해서 Square는 내부에 뷰를 그려주는 render 메소드 하나만 남게 된다.이렇게 render하나만 있는 단순화 된 컴포넌트를 위해서 리액트는 functional component라는 문법을 지원해준다. React.component를 확장하는 대신, props를 인자로 받고 랜더링 되는 값을 리턴하는 함수를 작성하는 것이다. 1234567function Square(props) { return ( {props.value} );}Colored by Color Scriptercs Square 클래스는 변경되어 위의 함수와 같이 변한다.. 2017. 6. 10. [ReactJS] 튜토리얼(Tutorial) - 7 튜토리얼(Tutorial) - 7 불변성(Immutability) 앞선 포스팅에서 배열에 저장된 값을 수정하기 위해 slice 메소드를 사용했다.이는 불변성을 유지하기 위함이었는데, 왜 불변성이 react에서 중요한 걸까 1234567891011121314/* data change with mutate */var player = {score: 1, name: 'Jeff'};player.score = 2;// Now player is {score: 2, name: 'Jeff'} /* data change without mutate */var player = {score: 1, name: 'Jeff'}; var newPlayer = Object.assign({}, player, {score: 2});// N.. 2017. 6. 10. [ReactJS] 튜토리얼(Tutorial) - 6 튜토리얼(Tutorial) - 6 이제 우리는 Square를 클릭 했을 때 일어나는 이벤트를 변경해야한다.Board 컴포넌트는 Square의 상태를 배열로써 저장하고 있다.즉, Square가 Board가 가지고 있는 state 값을 업데이트 할 수 있는 방법을 찾아야한다는 것이다.컴포넌트의 state는 비공개로 설정되었으므로 Board에 있는 Square의 상태를 Square에서 직접 접근하여 업데이트 할 수 없다. 12345678renderSquare(i) { return ( this.handleClick(i)} /> ); }Colored by Color Scriptercs 이 때 일반적으로 사용되는 패턴은 Board에서 Square로 함수를 전달하는 것이다.Board 함수 내부의 renderSquar.. 2017. 6. 10. [ReactJS] 튜토리얼(Tutorial) - 5 튜토리얼(Tutorial) - 5 state 끌어올리기(Lifting State Up) 지금 까지 과정을 잘 수행했다면 좀 더 견고한 틱택토 게임이 되어가고 있을것이다.하지만 지금은 state가 각 Square 컴포넌트 마다 캡슐화 되어 있다.완전하게 잘 작동하는 게임을 만들기 위해서는 플레이어가 게임에서 승리했는지 확인하고, X와 O를 놓아야한다.다시 말해, 누가 승리 했는지 확인하려면, 어느 한 곳에서 9칸의 모든 값을 가져야한다. 이 때문에 Square의 상위 컴포넌트인 Board에서 결과값을 종합해야한다고 생각할 수 있다.그러나 이와 같은 코딩은 기술적으로 가능하지만, 코드를 이해하기 어렵게 만들고 리팩토링이 힘들어서 권장하지 않는다. 이 방법 대신에 해결책은, 각 Square 컴포넌트가 아닌 B.. 2017. 6. 10. [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. [알고리즘] 동적 계획법(Dynamic Programming) - 6 동적 계획법(Dynamic Programming) - 6 이번 시간에는 동적 계획법의 또다른 고전 중에 Knapsack Algorithm에 대해 알아보자Knapsack은 배낭을 가리키는 말인데 배낭 알고리즘 이라고도 한다.이 알고리즘에는 재미있는 이야기가 숨어있는데, 도둑이 상점에 물건을 훔치기 위해 배낭 하나를 들고 왔다고 했을 때,가지고 나갈수있는 무게가 한정적이지만 최대의 비용을 낼 수있게 해야한다. 각각의 물건 마다 무게와 가격이 다 다르다.따라서 n개의 아이템과 배낭의 용량 W가 주어질 때배냥의 용량을 초과하지 않으면서 가격이 최대가 되는 부분집합을 구해야 한다.. 예를 들어 위의 그림에서 {1,2,5}는 가격의 합이 35,{3,4}는 가격의 합이 40,{3,5}는 가격의 합이46 이지만 배낭의.. 2017. 6. 10. 이전 1 ··· 10 11 12 13 14 15 16 ··· 38 다음 반응형
