728x90 반응형 react14 [REACT] HOOK - useEffect useEffect 사이드 이펙트를 수행하기 위한 훅 사이드 이펙트는 사전적으로 부작용이라는 뜻으로, 리액트에서 말하는 사이드 이펙트는 그냥 효과 혹은 영향을 뜻한다. 예를 들면, 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업을 의미 이런 작업을 이펙트라고 부르는 이유는 이 작업들이 다른 컴포넌트에 영향을 미칠 수 있으며 랜더링 중에는 작업이 완료될 수 없기 때문에 렌더링이 끝난 이후에 실행되어야 하는 작업들 useEffect는 클래스 컴포넌트에서 제공하는 생명주기 함수인 componentDidMount(), componentDidUpdate() 그리고 componentWillUnmount() 와 동일한 기능을 하나로 통합하여 제공한다. 그래서 useEffect() 훅만으로 생명 주기 .. 2022. 12. 23. [REACT] HOOK - useState useState 가장 대표적이고 많이 사용되는 HOOK state를 사용하기 위한 훅 함수 컴포넌트에서는 기본적으로 state를 제공하지 않기 때문에 클래스 컴포넌트처럼 state를 사용하고 싶다면 useState() 훅을 사용 함 형식 const [변수명, set함수명] = useState(초기값); EX import React, { useState } from 'react'; function Counter(props){ var count = 0; return( 총 {count}번 클릭했습니다. count++}>클릭 ) } export default Counter; Counter 컴포넌트는 버튼을 클릭하면 하나씩 증가 하지만 재랜더링이 일어나지 않아 새로운 카운트 값이 화면에 표시되지 않는다. 이런 경.. 2022. 12. 23. [REACT] HOOK HOOK이란 컴포넌트에는 클래스 컴포넌트와 함수 컴포넌트가 있다. 클래스 컴포넌트에는 state라는 랜더링에 필요한 데이터를 관리한다. 함수 컴포넌트는 클래스 컴포넌트와는 다르게 코드도 굉장히 간결하지만, 별도로 state를 정의해서 사용하거나 컴포넌트의 생명주기에 맞춰 어떤 코드가 실행되도록 할 수 없다. 따라서 함수 컴포넌트에 이런 기능을 지원하기 위해 나온 것이 HOOK HOOK을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 구현 가능하다. HOOK은 갈고리라는 뜻으로 보통 프로그래밍에서는 원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 것을 의미 한다. HOOK의 이름은 모두 use로 시작한다. HOOK의 종류 useState 가장 대표적이고 많.. 2022. 12. 23. [REACT] JSX JSX란? JavaScript를 확장한 문법으로 XML/HTML을 합친 것이다. JSX의 X는 extension의 X를 의미함 예) const element = Hello, World! JSX의 역할 JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거치게 됨. 그렇기 때문에 실제로 JSX로 코드를 작성해도 최종적으로는 자바스크립트 코드가나오게 됨 JSX 코드를 자바스크립트 코드로 변환하는 역할을 하는 것이 바로 리액트의 createElement() 라는 함수. JSX의 장점 코드가 간결하고 가독성이 향상됨 Ex JSX를 사용했을 때 import React from "react"; function Book(props){ return( {`이 책의 이름은 ${props.name}입니.. 2022. 12. 21. [REACT] Hooks : useEffect useEffect 리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 HOOK함수 import { useState, useEffect } from "react"; const Info=()=>{ const [name, setName] = useState(''); const [nickname, setNickname] = useState(''); useEffect(()=>{ console.log('랜더링이 완료 되었습니다.'); console.log({ name, nickname }) }) const onChangeName = (e) =>{ setName(e.target.value); } const onChangeNickname = (e) =>{ setNickname(e.target.v.. 2022. 12. 15. [REACT] newsapi newsapi 에서 제공하는 API를 통해 최신 뉴스를 불러 온 후 출력하는 예제 사전에 newsapi에서 제공하는 API키를 발급받아야한다. 1. 발급 https://newsapi.org/account Login - News API newsapi.org 2. 발급받은 api를 axios를 사용하여 불러오기 import { useState } from "react"; import axios from "axios"; const App=()=>{ const[data, setData] = useState(null); const onClick=()=>{ axios .get('https://newsapi.org/v2/top-headlines?country=kr&apiKey=e52ce7509c584062931c0b.. 2022. 12. 14. [REACT] axios axios axios는 현재 가장 많이 사용하는 자바스크립트 HTTP 클라이언트 이 라이브러리의 특징은 HTTP 요청을 Promise기반으로 처리한다는 것 1. axios 설치 해당 프로젝트에 axios 설치 yarn add axios 2. JSON.stringify : 자바 스크립트 객체를 JSON 텍스트 형식으로 변환하는 함수. JSON.parse : JSON 형식의 텍스트를 자바 스크립트 형식으로 변환하는 함수. import { useState } from "react"; import axios from "axios"; const App=()=>{ const[data, setData] = useState(null); const onClick=()=>{ axios .get('https://jsonpl.. 2022. 12. 14. [REACT] 라우팅 라우팅이란? 웹에 어플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미 합니다. 이렇게 여러 페이지로 구성된 웹 애플리케이션을 만들 때, 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다. 1. 리액트 라우터 방식 - 리액트의 라이브러리들 중에서 가장 오래 되었고, 가장 많이 사용 - 가장 많이 사용 - 리액트 라우터를 사용하면 손쉽게 리액트 라우터로 싱글 페이지 애플리케이션을 만들 수 있음 - 멀티 페이지로 애플리케이션을 작성하면 다른 페이지로 이동할 때 새로운 html, css, js 이미지 파일 등의 리소스를 전달 받아 브라우저 화면에 보여 줍니다. 2. Next.js방식 - 리액트 프로젝트의 프레임 .. 2022. 12. 13. [REACT] Sass Sass Sass(Syntacitically Awesome Style Sheets)는 css전처리기로 복잡한 작업을 쉽게 작업 할 수 있도록 해주고, 스타일 코드의 재활용성을 높여줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수에 탁월함 설치 yarn add sass *Sass는 두 가지 확장자를 지원함 .scc와 .sass Sass가 처음 나왔을 때는 .sass 확장자만 지원하다가 나중에 개발자 들의 요청이 많아서 .scss도 지원하기 시작했다. Ex.sass $front-stactk : Heldie, sans-werid body font: 100% color:$primary-color EX.scss $front-stactk : Heldie, sans-werid; body{ font: 100%; col.. 2022. 12. 9. [REACT] 라이브러리 *node_modules에서 라이브러리 불러오기 @import '../../../node_modules/libray/style'; 위처럼 경로를 사용하다 보면 불편하기 때문에 @import '~/libray/styles'; 위와 같이 ~(물결 문자)를 사용하면 자동으로 node_modules디렉터리를 탐지하여 스타일을 불러올 수 있다. include-media 반응형 디자인에 적용 open-color 색상을 편리하게 적용 설치 이런식으로 같이 설치 할 수 있다. yarn add open-color include-media classnames CSS클래스를 조건부로 설정할 매우 유용한 라이브러리 설치 yarn add classnames EX import classNames from 'classnames';.. 2022. 12. 9. [REACT/JavaScript] map() map() JavaScript의 표준 내장 객체 Array의 메소드 prototype.map()이다. 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 형식 arr.map(callback(currentValue[, index[, array]])[, thisArg]) Ex01. import { useState } from "react"; const IterationSample = () => { const names = ['눈사람', '호빵', '눈', '바람']; const nameList = names.map( (currentValue, index, array) => currentValue={currentValue} index={index} array={arr.. 2022. 12. 8. [REACT] list 추가, 삭제 - map, concat, filter Ex.01. HTML을 사용한 list출력 const IterationSample = () => { return ( 눈사람 호빵 눈 바람 ) } export default IterationSample; Ex02. map을 이용한 list 출력 보다 간편한 출력이 가능하다. const IterationSample = () => { const names = ['눈사람', '호빵', '눈', '바람']; const nameList = names.map((name)=>{name}); return ( {nameList} ) } export default IterationSample; Ex03. Concat을 사용한 list추가 import { useState } from "react"; const Iteratio.. 2022. 12. 8. [REACT] input 클릭이벤트 EX01 import { useState } from "react"; const EventPractice=()=>{ const[username, setUsername] = useState(''); const[message, setMessage] = useState(''); const onChangeUsername=e=>setUsername(e.target.value); const onChangeMessage=e=>setMessage(e.target.value); const onClick=()=>{ alert(username + " : " + message); setUsername(''); //공백으로 처리 setMessage(''); //공백으로 처리 } const onKeyPress=(e)=>{ if(.. 2022. 12. 7. [REACT] CMD를 이용해 REACT 개발환경을 설치하는 2가지 방법 - npm과 yarn PC에 리액트 앱을 생성하기 위한 방법은 크게 2가지 이다. npm과 yarn NPM NPM은 node.js 에서 제공하는 패키지 매니저(Package manager)이다. 패키지를 다루는 작업을 편리하고 안전하게 수행하기 위해 수행되는 툴 패키지를 안전하게 배포받기 위해 사용된다. YARN Javascript 패키지 매니저이다. NPM과 마찬가지로 프로젝트 패키지 의존성을 관리하는 툴이라 할 수 있다. [ NPM을 사용한 REACT 설치 ] 1. Node.js NPM은 node.js 에서 제공하는 패키지 매니저(Package manager)이므로 npm을 사용하기 위해서는 node.js를 먼저 설치해야한다. Node.js는 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. Ins.. 2022. 12. 5. 이전 1 다음 728x90 반응형
