반응형 2017/06/109 [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. 이전 1 2 3 다음 반응형