분류 전체보기
-
[React] - 13) onSubmit/onClick의 차이Coding/React.js 2019. 12. 18. 17:38
onSubmit / onClick 리액트에서 이벤트를 처리할 때, 그동안은 보통 onClick을 사용했습니다. 하지만 리액트에서는 종종 onSubmit을 사용하기도 합니다. 한번 그 차이를 알아볼까요? 우선 onClick으로 구현한 코드를 봅시다. 함수형 컴포넌트를 생성하고 다음과 같이 작성해 볼까요? import React, {useState} from 'react'; const CompareSubmitClick = (props) => { const [number, setNumber] = useState(0); const onClick = () => { setNumber(number + 1); } return ( {number} 클릭! ); }; export default CompareSubmitCli..
-
[Javascript] 배열 함수 filter(feat.리액트 불변성 유지)Coding/JavaScript 2019. 12. 18. 15:45
자바스크립트의 배열 내장 함수 filter는 말그대로 '필터'를 씌워 조건에 맞지 않는 원소를 걸러내는 함수입니다. 간단한 예로 알아보겠습니다. const array = [1, 2, 3]; const filterArray = array.filter(num => num > 3); filter의 파라미터에는 조건을 확인해주는 '함수'가 들어가야만 합니다. 파라미터로 넣는 함수는 true or false를 return해야 하고, false인 원소는 걸러지게 됩니다. 리액트의 불변성 유지와 무슨 관련이 있는지? 리액트의 state에서 가장 중요한 점은 불변성을 유지해 주어야 한다는 것입니다. filter 함수는 기존의 배열을 수정하는 것이 아니라, 새로운 배열을 만들어 주기 때문에 리액트의 불변성을 효율적으로 ..
-
[React] - 12) Sass로 스타일링 하기Coding/React.js 2019. 12. 16. 16:16
velopert 님의 리액트를 사용하는 기술에서 공부한 내용임을 밝힙니다 😀 Sass 리액트에서 컴포넌트를 스타일링 하는 방법은 다양합니다. 가장 무난하게 일반 css를 이용하는 방법도 있겠습니다만 오늘은 Sass를 이용하여 컴포넌트를 스타일링해보도록 하겠습니다. Sass는 기본적으로 create-react-app으로 리액트 프로젝트를 만들 때 자동으로 사용할 수 있게 됩니다. 우선 리액트 프로젝트를 만들고, 터미널에서 node-sass를 추가해 줍시다. 이를 설치하면 sass를 자동으로 css로 변환하여 줍니다. yarn add node-sass 라이브러리가 설치 되면, SassTemplate.scss파일을 만들어 다음과 같이 스타일링 해 봅시다. .SassComponent { .red { color:..
-
[React] - 11) Hook - useMemo, useCallbackCoding/React.js 2019. 12. 6. 15:38
velopert 님의 리액트를 다루는 기술 책으로부터 공부한 내용임을 밝힙니다 😄 Hook 안녕하세요 이번엔 지난 포스팅에 이어 함수형 컴포넌트의 Hook에 대해 포스팅합니다. useMemo는 특정 값이 바뀔 때만 호출되어 연산 최적화에 도움을 줍니다. onChange 같은 이벤트 처리 시에 굳이 렌더링 할 필요가 없음에도 불필요하게 렌더링 하는 경우를 최소화 할수 있다는 것입니다. 다음 코드를 작성한 후 App에 렌더링 해 봅시다. import React, { useState, useMemo } from 'react'; const getAverage = numbers => { console.log('평균 값 계산 중'); if (numbers.length === 0) return 0; const sum..
-
[React] - 10) Hook - useState/useEffectCoding/React.js 2019. 12. 5. 15:15
velopert 님의 '리액트를 사용하는 기술' 교재로 부터 공부한 내용임을 밝힙니다😃 Hook 안녕하세요 오늘은 Hook의 한 종류인 useState와 useEffect에 대해 포스팅합니다. 이전에 Hook이 뭔지 알아야겠죠? 이전 포스팅에서 클래스형 컴포넌트에서는 state를 관리하기 간편하지만, 함수형 컴포넌트에서는 원래는 불가능하다고 했습니다. 하지만 useState의 등장으로 함수형 컴포넌트에서도 state를 굳이 클래스형으로 변환하지 않고도 다룰 수 있게 되었죠! Hook은 이처럼 함수형 컴포넌트에서도 상태 관리를 하고/렌더링 후 작업을 설정하는 등의 작업을 할 수 있습니다. 클래스형 컴포넌트는 이러한 Hook의 역할을 라이프사이클 메소드가 대신하는데요! 사실 라이프사이클 메소드가 보다 종류가..
-
[React] - 9) 에러 발생 시 처리하기Coding/React.js 2019. 12. 4. 14:38
velopert 님의 리액트를 다루는 기술 책으로부터 공부한 내용임을 밝힙니다 😄 에러 발생시키기 안녕하세요 오늘은 리액트에서의 에러 발생 시 화면 처리에 대해 포스팅하겠습니다. 대부분의 웹 페이지들은 특정 에러가 발생하였을 때 띄우는 창이 있습니다. 예를 들면 PageNotFound 에러 발생 시에 나타나는 이런 페이지가 있겠죠? 리액트에서도 에러 발생시에 나타나는 창이 있습니다. 우선 억지로 에러를 만들어 볼까요? ErrorFound.js를 만들고 다음과 같이 작성합니다. import React, { Component } from 'react'; class ErrorFound extends Component { render() { return ( {this.props.abc.value} ); } } ..
