react3 1. 혁신적인 Query언어 GraphQL (feat.graphql-yoga) GraphQL을 사용하는 이유와 쉽게 사용하는 방법에 대해 알아보도록 합시다. :3 graphql-yoga : 쉽게 설치하는데 중점을 둔 완전한 GraphQL 서버 말그대로 GraphQL을 쉽게 시작할 수 있게 만들어 줍니다. 프론트에서 예를 들자면 React의 create-react-app 명령어와 비슷합니다. create-react-app이 리액트 프로젝트를 쉽고 빠르게 시작할 수 있게 해주는 것처럼 graphql-yoga는 graphql 프로젝트를 쉽고 빠르게 시작할 수 있게 해줍니다! yarn add graphql-yoga GraphQL로 해결할 수 있는 문제 Over-fetching 예를들어 모든 유저들 이름을 웹사이트에 보여주고 싶을 때 URL이 /users/ GET라고 합시다. users에서.. 2019. 7. 31. [React] Binding 바인딩 우선, 리액트에서의 바인딩을 알아보기 전에 자바스크립트에서 "this"에 대한 이해가 되어있어야 리액트에서의 바인딩을 알 수 있습니다. 자바스크립트 바인딩 객체안의 메서드에서 this는 그 메서드가 포함된 object를 가리키게 됩니다. var obj = { prop: 'Hello', sayHello: function() { console.log( this.prop ); } }; // 1. obj.sayHello(); //"Hello" // 2. var reference = obj.sayHello; reference(); // undefined sayHello 메서드안의 this는 obj객체가 되어 obj.prop인 Hello를 전달받아 콘솔 로그를 출력합니다. 변수 reference에 담길 때 obj와.. 2019. 7. 26. [React] Hooks : 클래스 컴포넌트에서 함수형 컴포넌트로 리액트팀에서 React Hook을 발표했는데 함수형 컴포넌트에서도 이제 state와 side-effect를 적용 가능하게 되었습니다. 기본적으로 제공하는 Hook부터 커스텀 Hook까지 살펴보도록 하겠습니다. `useState` Hook : 컴포넌트의 state관리 class App extends React.Component { constructor(props) { super(props); this.state = { value: '', }; } onChange = event => { this.setState({ value: event.target.value }); }; render() { return ( Hello React ES6 Class Component! {this.state.value} ); }.. 2019. 7. 25. 이전 1 다음
