본문 바로가기
반응형

Dev

 (122)
React : 이벤트 설정! render 함수에서 이벤트 설정 한 부분을 확인해보자! render() { return ( 카운터 값: {this.state.number} + - ); } 버튼이 클릭되면 함수가 각각 호출되도록 설정되어 있지? 기존에 자바스크립트로 비슷한 작업을 해봤다면 익숙할거야 위 코드를 다시 봐보자고! 정말로 주의해야 할 점이 있는데! 리액트에서 이벤트 함수를 설정할 때 html과는 다른 점이 있어! 이벤트이름을 설정 할 때 camelCase 로 표기해야 해. onclick 은 onClick, onmousedown 은 onMouseDown, onchange 는 onChange 이런식으로! 이벤트에 전달해주는 값은 함수 여야 해. 만약에 onClick={this.handleIncrease()} 이런식으로 하게 된다..
ES6 : 비구조화 할당~ 오우오우~ 일단 이런 배열이 있다고 보자! const animalList = ["CAT", "DOG", "TIGER"]; const cat = animalList[0]; const dog = animalList[1]; const tiger = animalList[2]; console.log(cat); // CAT console.log(dog); // DOG console.log(tiger); // TIGER animalList라는 변수는 순서대로 'cat', 'dog', 'tiger'를 갖고 있는 배열이야. 이 변수가 가진 값을 각각 변수에 꺼내서 쓰려면 직접 하나씩 지정을 해줘야 해.. 이런 작업은 엄청 귀찮고 코드를 읽기에도 엄청 복잡하게 보이는 단점이 있어! 비구조화 할당을 써보자고 뚜둥! const [cat..
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 }) 가 됐지? 이건 '비구조화 할당' 이라는 문법..
ES6 : 전개연산자(Spread Operator) ㅗㅜㅑ 전개연산자(Spread Operator)는 객체나 배열의 값을 하나 하나 넘기는 용도로 사용할 수 있어! 전개연산자를 사용하는 방법은 점 세개(...)를 붙이면 돼! ES5에서 배열의 내용을 합쳐서 새로운 배열을 만들기 위해선 concat 메소드를 썼거든? 예를 들자면 이렇게! var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; var arr3 = [7, 8 ,9]; var arrWrap = arr1.concat(arr2, arr3); console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9] ES6에서 전개연산자를 쓰면! const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [7, 8,..
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..
반응형

티스토리툴바