Coding/React.js
-
[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..
-
[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} ); } } ..
-
[React] - 8) 이벤트 핸들링과 refCoding/React.js 2019. 11. 28. 16:29
velopert 님의 '리액트를 사용하는 기술' 교재로 부터 공부한 내용임을 밝힙니다😃 이벤트 핸들링 안녕하세요 오늘은 저번 포스팅에 이어 리액트의 이벤트 핸들링과 ref에 대해 포스팅합니다. 이전에 리액트에서의 이벤트 핸들링은 HTML에서의 이벤트 핸들링과 유사한 점이 많다고 했는데요. 예전 포스팅에서도 다루었던 onClick 기억하시나요 ? 이것들도 button DOM에 연결된 이벤트 중 하나라고 할 수 있겠습니다. 오늘은 간단한 예제로 이벤트 핸들링과 ref에 대해 알아보겠습니다! 우선, 리액트 프로젝트를 열고 클래스형 컴포넌트를 하나 만들어 줍시다. (vscode에서 code snippets을 사용하고 있다면 rcc만 눌러도 클래스형 컴포넌트가 자동완성 됩니다!) 그리고 입력 창 하나와 버튼 하나..
-
[React] - 7) 이벤트 처리Coding/React.js 2019. 11. 26. 16:58
velopert님의 리액트를 사용하는 기술 교재로부터 공부한 내용임을 밝힙니다😀 React 이벤트 처리 안녕하세요 😀 이번 포스팅에서는 리액트에서의 이벤트 처리에 대해 다뤄보겠습니다 리액트에서의 렌더링 부분은 HTML과 굉장히 유사한 부분이 많은데요. 리액트에서의 이벤트 처리 역시 HTML에서의 이벤트 처리와 비슷한 부분이 많지만, 조금씩 다른 부분이 있어 조심히 다뤄야 합니다. 우선 다음 두 코드를 볼까요! HTML ... 버튼 React return ( 버튼 ) 두 코드는 같은 버튼을 생성하지만, 약간의 차이점이 느껴시나요? 1. onclick 전달 방식 우선, HTML의 경우, onclick에서 아예 alert 메시지 박스를 받는 함수를 작성하여 연결받을 수 있습니다. 하지만 리액트의 경우 함수가 ..
-
[React] - 6) state(함수형 컴포넌트)Coding/React.js 2019. 11. 25. 15:42
velopert 님의 '리액트를 사용하는 기술' 교재로 부터 공부한 내용임을 밝힙니다😃 state 안녕하세요, 오랜만에 리액트 포스팅입니다. 회사일을 병행하면서도 꾸준히 업로드하겠다고 했던 리액트 포스팅이 늦어지게 된 이유는, 학교 동아리에서 진행하는 해커톤 준비에 열을 쏟아야 했기 때문이었습니다. ㅠㅠ 이제는 해커톤 행사가 끝났기 때문에 리액트 (+스프링?)와 Mac에 대한 포스팅을 주로 올리게 될 것 같아요. 자, 그럼 시작할게요! 저번 포스팅에서는 props에 대해 알아보았는데요. props는 부모 컴포넌트가 설정하여 렌더링할 데이터를 전달해주는 것이라고 했었는데, state는 약간 다릅니다. state는 꼭 부모 컴포넌트로부터 전달받는 것이 아닌, 컴포넌트 자체적으로 지닌 값으로, 컴포넌트 내부에..