Dev/React (21) 썸네일형 리스트형 이것만 알아도 React 기본 마스터 !! //App.js import React from 'react'; 는 리액트를 불러온다. 어디서? 리액트 프로젝트를 만들 때 node_modules 디렉토리도 함께 생성이 되는데 그 안에 react 모듈이 설치 돼! 그래서 그 react를 불러오는거지!! 근데 원래 모듈을 불러와서 사용하는 건 사실 브라우저에서는 없던 기능! 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 Node.js에서 지원하는 기능!! 이러한 기능을 브라우저에서도 사용하려고 번들러 ( ex: 웹펙, Parcel, browserify ... )를 사용함 함수에서 undefined를 렌더링 하면 오류 나온다! // 이렇게 하면 오류나온다! function App() { const name = undefined; return.. React : 이벤트 설정! render 함수에서 이벤트 설정 한 부분을 확인해보자! render() { return ( 카운터 값: {this.state.number} + - ); } 버튼이 클릭되면 함수가 각각 호출되도록 설정되어 있지? 기존에 자바스크립트로 비슷한 작업을 해봤다면 익숙할거야 위 코드를 다시 봐보자고! 정말로 주의해야 할 점이 있는데! 리액트에서 이벤트 함수를 설정할 때 html과는 다른 점이 있어! 이벤트이름을 설정 할 때 camelCase 로 표기해야 해. onclick 은 onClick, onmousedown 은 onMouseDown, onchange 는 onChange 이런식으로! 이벤트에 전달해주는 값은 함수 여야 해. 만약에 onClick={this.handleIncrease()} 이런식으로 하게 된다.. React : setState에 객체 대신 함수 전달하기! setState를 사용해서 값을 업데이트 할 때! 기존의 값을 참고해서 값을 업데이트 하게 될 때! 좀 더 나은 문법으로 할 수 있어! 기존에 작성했던 코드가 이랬지? this.setState({ number: this.state.number + 1 }); 큰 문제는 아니지만, 또 this.state를 조회 하고 있어! 이렇게 바꿔보자! this.setState( (state) => ({ number: state.number }) ); setState에 updater 함수를 만들어서 전달했어! 좀 더 나아가서! this.setState( ({ number }) => ({ number: number + 1 }) ); 보면 (state)가 ({ number }) 가 됐지? 이건 '비구조화 할당' 이라는 문법.. React : state값을 바꾸기 위한 setState! 메소드에 있는 this.setState에 대해서 알아보자! state에 있는 값을 바꾸기 위해서는 this.setState를 무조건 거쳐야 해! 리액트에서 이 함수가 호출되면 컴포넌트가 리랜더링 되도록 설계되어 있거든! 이 함수에 대해 더 자세히 보자고! setState는 객체로 전달되는 값만 업데이트 해 줘! 예제로 보자! 지금은 state에 number 값 밖에 없지만 다른 값이 있다고 가정해보자고! 여기서 this.setState({ number: 1 });을 하게 되면, foo는 그대로 남고, number 값만 업데이트 된다는거야! setState는 객체의 깊숙한 곳까지 확인하지 못해! 예를 들어서, state가 이렇게 설정됐다고 한다면 이렇게 한다고 해서 foobar 값이 업데이트 되지 않아! .. React : 메소드 작성 + 화살표함수 컴포넌트에 메소드를 작성했어! 위 사진처럼 작성할 수도 있고 이렇게도 작성 할 수 있어! 이렇게 작성했을 때, this가 undefined로 나와서 제대로 처리되지 않게 되거든? 함수가 버튼의 클릭이벤트로 전달되는 과정에서 "this"와 연결이 끊겨버리기 때문이야! 이를 고쳐주려면 constructor에서 이렇게 해줘야 해.. 그냥 화살표 함수 쓰자.. 참조: velopert.com/3629 화살표 함수를 공부하면서 모든 것을 대체할 수 없다는 것을 알아버렸지 뭐얌 function BlackDog() { this.name = '흰둥이'; return { name: '검둥이', bark: function() { console.log(this.name + ': 멍멍!'); } } } const blackDo.. React : state를 통해 동적인 데이터를 다뤄보자!! 우선 Counter 컴포넌트를 하나 만들어보자! 위에서부터 아래로 살펴보자! 우선, 컴포넌트의 state를 정의할 때에는 class fields 문법을 사용해서 정의해! 만약 class fields 문법을 사용하지 않는다면 이렇게 돼! 확실히 class fields를 사용하는게 편해보이지? 맞아! 편의성 때문에 class fields를 사용하는거야! constructor에서 super(props)를 호출한 이유는 우리가 컴포넌트를 만들게 되면서 컴포넌트를 상속하게 되고 constructor를 사용하면 기존의 클래스 생성자를 덮어쓰게 돼! 그래서 리액트 컴포넌트가 갖고 있던 생성자를 super를 통해서 미리 실행하고 그 다음에 우리가 할 작업(state 설정)을 해주는거야! 만약 class fields도 .. React : 함수형 컴포넌트 + defaultProps 함수형 컴포넌트 //MyName.js import React from 'react'; const MyName = ({ name }) => { return ( 안녕하세요! {name} 입니다. ) } MyName.defaultProps = { name: '기본이름' } export default MyName; //App.js import React, { Component } from 'react'; import MyName from './MyName'; import './App.css'; class App extends Component { render() { return ( ) }; } export default App; 함수형 컴포넌트와 클래스형 컴포넌트의 주요 차이점은, state 와 LifeCycl.. React -13: 완성! 원래 더 뭐를 쓰려고 했는데 뭐가 더 없네 .. 그냥 css 입히고 끝이야... 근데 이정도면 api 가져와서 쓸 수 있을 정도 됐으니까! 리액트를 어느정도 다룰 수 있다고 할 수 있지 않을ㄲ..? 응 아니야... 일단 나 같은 경우엔 이렇게 구현했어! 리액트 공부라서 반응형은 시간낭비 같아서 일부러 구현하지 않았고 다른 프로젝트로 다시 한번 해보려고 해!! 다음 리액트로 다시 한번 해보자고 !! 나도 처음이라 설명 잘 못한게 많은거 같은데 .. 다음에서는 더 열심히 해볼게 가자가ㅏ자갖가자갖가자갖 참고: nomadcoders.co/ 이전 1 2 3 다음
