웹어플리케션을 만들다보면 비동기작접으로 처리해야할때가 필요하다 한가지일만하는것이아닌 여러 작업을 실행하는, 파일 다운로드 기능이라 보면된다 이렇게 서버 API를 호출할때 외에도 작업을 비동기적으로 처리할때가있는데 바로 setTimeout 함수를 사용하여 특정작업을 예약할때이다. function printMe() { console.log("hello world!"); } setTimeout(printMe, 3000); console.log("대기중 ..."); 비동기작업을 할때 가장 흔히사용하는 방법은 콜백함수를 사용하는 것이다. 1. 콜백함수 function increase(number, callback) { setTimeout(() => { const result = number + 10; if (ca..

SASS는 css 전처리기로 복잡한 작업을 쉽게 할수잇도록 해주고 스타일 코드의 재활용성을 높여준다 실상에서는 SCSS가 많이 사용되고, 회사에서도 scss를 사용하고있으로 SCSS로 볼려고한다. 우선 yarn add sass 설치를 해준다. 1. scss 로 컴포넌트 스타일링하기 우선 SassComponent.js 컴포넌트파일을 만든다. import React from 'react'; import './SassComponent.scss'; const SassComponent = () => { return ( ); }; export default SassComponent; 그후 SassComponent.scss 파일을 작성해준다. $red: #fa5252; $orange: #fd6e14; $yellow:..

만약에 반복되는 코드를 작성해야한다면??? import React from 'react'; import PropTypes from 'prop-types'; const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ); }; export default IterationSample; 이렇게 ... 반복되는 코드가있을수있다 그렇다면 파일용량도 증가되므로 낭비된다 그러면 어떻게 이런반복적인 내용을 효율적으로 보여줄까? 1. 배열의 map()함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용해 반복되는 컴포넌트를 랜더링해줄수있다. 문법 const numbers = [1, 2, 3, 4, 5]; const result = numbers.map((num) => num ..

ref는 언제사용할까? Dom에 직접적으로 접근해야하는 상황이라고한다. 1. state로 상태변화 rendering하기 우선 값 변화에따라 state를 사용해서 만든 소스를 구현해보자 import { Component } from 'react'; import './ValidationSample.css'; class ValidationSample extends Component { state = { password: '', clicked: false, validated: false, }; handleChange = (e) => { this.setState({ password: e.target.value, }); }; handleButtonClick = (e) => { this.setState({ click..

웹브라우저에서 DOM요소들과 상호작용하는것을 이벤트라고한다 1. 마우스커서에 올렸을때 onmouseover 이벤트 실행 2. 클릭했을때 click 이벤트 실행 3. Form 요소 바뀔때 onchange 이벤트 실행 리액트의 이벤트 시스템은 HTML 이벤트와 사용법이 꽤 비슷하다 1. 이벤트 핸들링 다루기 1. onChange 이벤트 핸들링하기 onChange이벤트를 설정하는 코드를 작성한다 import { Component } from 'react'; class EventPractice extends Component { render() { return ( 이벤트 연습 { console.log(e); }} > ); } } export default EventPractice; 콘솔쪽에 찍히는 로그를 확인해..

컴포넌트를 선언하는 방식은 두가지이다 하나는 함수 컴포넌트, 다른하나는 클래스 컴포넌트이다 1. 클래스형 컴포넌트 import { Component } from 'react'; import './App.css'; class App extends Component { render() { const name = 'react'; return {name}; } } export default App; 클래스 컴포넌트에서는 render 함수가 꼭있어야한다. 그렇다면 함수 컴포넌트와 클래스컴포넌트는 어떨때 사용해야할까? 함수 컴포넌트의 단점은 state와 라이프사이클 API의 사용이 불가능하다 이단점은 리액트 버젼 16.8이후 Hooks라는 기능이 도입되어서 해결되었다. 리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성..