본문 바로가기
반응형

2017/06100

[ReactJS] 튜토리얼(Tutorial) - 9 튜토리얼(Tutorial) - 9 히스토리 저장 틱택토 게임을 만들면서 불변성에 대한 이야기를 했었다.불변성을 유지함으로써 리액트에서 가지는 이점들이 상당히 많았는데이를 틱택토 게임에 구체적으로 적용해보도록하자. 1234567891011121314151617history = [ { squares: [ null, null, null, null, null, null, null, null, null, ] }, { squares: [ null, null, null, null, 'X', null, null, null, null, ] }, // ...]cs 이를 위해서 상태값을 저장해야 하는데 위의 코드와 같이 배열에 순차적으로 넣어두는 방법이 있다.이렇게 되면 인덱스 값으로 해당 히스토리에 접근이 가능하다. 12.. 2017. 6. 11.
[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.
반응형

티스토리툴바