티스토리

먹구름의 하늘

검색하기

블로그 홈

먹구름의 하늘

bgeun2.tistory.com/m

bgeun2 님의 블로그입니다.

구독자: 0

방명록 방문하기

반응형

주요 글 목록

React(리액트): ESLint - 자바스크립트 문법 검사 도구(vscode ESLint) 이번에는 ESLint라는 도구에 대해서 알아보자. 이 도구는 자바스크립트 문법을 검사해줄 수 있는 도구인데, 기본적인 자바스크립트 문법을 검사해주는 것을 떠나서 정말 다양한 커스텀 규칙들을 설정할 수 있다. 이전에 학습했던 Prettier 같은 경우는 따옴표, 들여 쓰기, 세미콜론, 라인길이와 같은 모양만 신경 쓰고 자동으로 고쳐 주는 것에 중점이 되어있다면, ESLint는 Prettier에서도 커버하는 코드 스타일을 포함해서 정말 다양한 옵션들이 있다. 공식 홈페이지에서 규칙들을 확인해볼 수 있다. 렌치 모양이 있는 규칙들은 ESLint를 통해서 바로 고칠 수 있는 규칙이다 몇 가지 규칙들을 알아보자. max-params라는 규칙은 코드에 함수를 작성하게 될 때 파라미터의 개수를 제한시키는 작업을 한다.. 공감수 0 댓글수 0 2021. 8. 9.
React(리액트): 리액트에서 Prettier 사용하기(vscode에서 prettier사용) 리액트 개발을 조금 더 편하게 할 수 있게 해주는 도구들에 대해서 알아보자. 첫 번째로 알아볼 도구는 'Prettier'인데 자동으로 코드의 스타일을 관리해주는 도구이다. 예를 들어 문자열을 표현할 때 작은따옴표를 쓸지, 큰 따옴표를 쓸지 또는 코드의 뒤에 ;(세미콜론)을 붙일지 말지 들여 쓰기는 얼마나 할지와 같은 것들을 관리해 줄 수 있다. 이 Prettier의 특징은 코드의 스타일을 사용자의 마음대로 쉽게 커스터마이징 할 수 있다는 점이다. 오른쪽에 나와있는 옵션들을 하나하나 커스터마이징 해줄 수 있다. Prettier는 자바스크립트 뿐만 아니라 HTML, CSS 코드의 스타일도 관리할 수 있고 React, Angluar, Vue 등의 라이브러리도 지원해주기 때문에 굉장히 사용성이 좋다. Prett.. 공감수 0 댓글수 0 2021. 8. 9.
React(리액트): class형 컴포넌트(클래스형 컴포넌트), state와 setState 이번에 다루어볼 주제는 class형 컴포넌트이다. 우리가 기존에 컴포넌트를 만들 때는 함수형 컴포넌트로 만들어왔다. class형 컴포넌트는 컴포넌트를 선언하는 또 다른 방식이다. 하지만 class형 컴포넌트는 요즘 잘 사용하지 않는다. 그래도 알아보도록 하자. 잘 사용하지 않더라도 알아둘 필요가 있는 이유는 나중에 class형 컴포넌트를 사용하는 프로젝트를 유지 보수하는 일이 생길 수도 있기 때문이다. 그리고 함수형 컴포넌트 + Hooks로 못하는 작업이 두 개 정도 있긴 하다. 앞으로 새로운 컴포넌트를 만들 때에는 함수형으로 만드는 것이 맞고, class형 컴포넌트는 꼭 필요한 경우이거나, 예전 프로젝트를 유지 보수할 때 사용하는 것이 옳은 방법이다. Hello.js function Hello({ co.. 공감수 0 댓글수 0 2021. 8. 8.
React(리액트): immer 라이브러리 사용한 불변성 관리 이번에 학습할 내용은 'immer'라는 라이브러리를 사용해 더 쉽게 불변성을 지키는 방법이다. const object = { a: 1, b: 2 }; object.b = 3; 다음과 같이 object라는 객체가 있다고 가정해보자. 우리가 리액트에서 배열이나 객체를 업데이트해야 할 때에는 다음 코드처럼 값을 직접 수정하는 형태의 코드는 불변성을 깨뜨리는 형태의 코드이다. const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3 } 그 대신에 새로운 객체를 만들고 spread 연산자를 사용해서 기존의 값을 집어넣고 새로운 값을 덮어쓰는 방식이 올바른 방식이다. 이렇게 해야 나중에 컴포넌트가 제대로 리 렌더링 되고 컴포넌트 최적화도 수행할 수 있.. 공감수 0 댓글수 0 2021. 8. 8.
React(리액트): Context API를 사용한 전역 값 관리 이번에는 Context API를 사용해 리액트에서 전역적인 값을 관리하는 방법에 대해 알아보자. App.js const onToggle = useCallback(id => { dispatch({ type: 'TOGGLE_USER', id }); }, []); const onRemove = useCallback(id => { dispatch({ type: 'REMOVE_USER', id }); }, []); return ( 활성 사용자 수: {count} ) 이전에 구현했던 App 컴포넌트를 살펴보면 App 컴포넌트 내부에서 'onToggle'과 'onRemove'가 구현된 다음, 이 두 가지 함수가 UserList 컴포넌트에게 전달이 되는 구조이다. UserList.js import React from .. 공감수 0 댓글수 0 2021. 8. 6.
React(리액트): 커스텀 Hook 만들어 사용하기 이번에는 Custom Hook을 만드는 방법에 대해서 알아보자. const onChange = (e) => { const {name, value } = e.target; setInputs({...inputs, [name]: value}); } 컴포넌트를 만들다 보면 가끔씩 반복되는 로직들이 발생한다. 다음과 같이 input을 관리하는 코드는 꽤나 많이 작성하게 될 수 있는 코드다. input을 관리하려면 'e.target' 안에 있는 name과 value를 읽어서 이를 참조해 어떤 새로운 상태를 설정해야 하기 때문이다. 이러한 상황에서는 우리가 custom Hook을 만들어 사용할 수 있다. 즉, 우리만의 Hook을 만든다는 소리이다. 리액트에 내장되어있는 useEffect, useState, useRe.. 공감수 0 댓글수 0 2021. 8. 2.
React(리액트): useReducer (컴포넌트 상태 관리, 업데이트) 이번에는 useReducer라는 Hook에 대해 알아보자. 이전에는 컴포넌트의 상태를 업데이트해야 할 때는 useState를 사용해서 새로운 상태를 설정해주었는데 useState 말고 useReducer를 사용해서도 상태를 업데이트해줄 수 있다. 이 둘의 차이점에 대해 살펴보자. 먼저 useState는 설정하고 싶은 다음 상태를 직접 지정해주는 방식으로 상태를 업데이트해주는 반면에 useReducer는 'action'이라는 객체를 기반으로 상태를 업데이트한다. 여기서 'action' 객체는 업데이트할 때 참조하는 객체이다. useReducer라는 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시키는 것이 가능하다. 심지어 다른 파일에 작성 후 불러올 수도 있다. 여기서 redu.. 공감수 1 댓글수 0 2021. 7. 30.
React(리액트): 최적화 함수들 useMemo, useCallback, React.memo useMemo 이번에는 'useMemo'라는 Hook을 사용해서 이전에 연산된 값을 재사용하는 방법에 대해서 알아보자. 이 Hook 함수는 주로 성능을 최적화해야 하는 상황에서 사용한다. 이전 글에서 만든 컴포넌트들에 이어서 만들어보도록 하겠다. App.js 컴포넌트의 users 배열에서 active 값이 true인 객체의 수 ('계정명'의 글자가 초록색)를 표시하는 함수를 만드는 것을 예제로 하겠다. App.js function countActiveUsers(users){ console.log('활성 사용자 수를 세는중....'); return users.filter(user=> user.active).length; } App.js의 맨 윗부분에 작성해준 코드이다. 이 함수는 users배열을 파라미터로.. 공감수 3 댓글수 0 2021. 7. 30.
React(리액트): useEffect(마운트, 언마운트 업데이트시 할 작업 설정) 이번에는 리액트의 useEffect라는 Hook 함수에 대해서 알아보자. 이 useEffect함수를 사용하게 되면 우리가 만든 리액트 컴포넌트가 처음 화면에 나타나게 될 때, 그리고 화면에서 사라지게 될 때 특정 작업을 할 수 있고, 추가적으로 컴포넌트의 어떤 props나 상태가 바뀌어서 업데이트될 때에도 어떤 작업을 할 수 있고 업데이트 되기 전에도 어떤 작업을 할 수 있다. 리 렌더링 될 때마다 어떤 작업을 등록할 수도 있다. 직접 사용하면서 이해를 해보자. 우선 컴포넌트가 마운트 될 때, 언마운트 될 때 특정 작업을 처리해 볼 것이다. 여기서 마운트는 나타나는 것을 의미한다. 컴포넌트가 나타나는 것을 마운트라 하고 삭제 될 때는 언마운트라고 한다. 2021.07.26 - [React.js] - Re.. 공감수 1 댓글수 0 2021. 7. 29.
React(리액트): 배열 항목 추가, 제거, 수정 배열에 항목 추가하기 이번에는 배열에 항목을 추가하는 방법에 대해 알아보자. 이 예제에서는 CreateUser 컴포넌트에서는 별 다른 상태 관리를 하지 않고 화면 구성만 할 뿐 상태 관리는 App 컴포넌트에서 해준다. App.js import "./App.css"; import UserList from './UserList'; import {useRef, useState} from 'react'; import CreateUser from './CreateUser'; function App() { const [inputs, setInputs] = useState({ username: '', email: '', }) const {username, email} = inputs; const onChange = .. 공감수 3 댓글수 1 2021. 7. 26.
React(리액트): useRef로 컴포넌트 안의 변수 만들기 이번에는 useRef를 사용해서 컴포넌트 안의 변수를 만드는 방법을 알아보자. 여기서 말하는 변수는 예를 들어 컴포넌트 안에서 'let' 키워드를 사용해서 어떤 변수를 선언한다고 가정해보자. 이렇게 변수를 선언하면 다음 리 렌더링 될 때 그 변수 값은 초기화된다. 만약 계속 유지하고 싶은 값을 관리하려고 하면 이전에 공부했던 useState를 사용해야 하는데 useState 같은 경우는 상태를 바꾸게 되면 컴포넌트가 리 렌더링 된다. 하지만 우리는 가끔씩 어떤 값을 바꾸었을 때 굳이 리 렌더링 할 필요 없는 값을 관리하게 될 때도 있다. 그런 경우에는 useRef를 사용하면 된다. useRef는 이전에 우리가 특정 DOM을 선택해야 될 때 useRef라는 Hook을 사용한다고 공부했다. 이것외에도 컴포넌.. 공감수 0 댓글수 0 2021. 7. 26.
React(리액트): 배열 렌더링, key 사용 리액트에서 배열을 렌더링 해야 할 때 어떻게 하는지 알아보자. const users =[ { id: 1, username: 'paboke22', email: 'paboke22@gmail.com' }, { id:2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; 먼저, 다음과 같이 객체를 원소로 가진 배열이 있다. 일단 비효율적인 방법으로 구현해보고 효율적인 방법으로 구현을 해보자. UserList.js import React, { useState } from 'react' function UserList() { const users =[ { id: 1, user.. 공감수 0 댓글수 0 2021. 7. 26.
React(리액트): useRef로 특정 DOM 선택하기 HTML과 JavaScript를 사용할 때에는 우리가 특정 DOM을 선택해야 하는 상황에 getElementById() 또는 querySelector() 같은 DOM select 함수를 사용해서 DOM을 선택한다. 리액트를 사용하는 프로젝트에서도 가끔씩 DOM을 선택해야 하는 상황이 생길 수 있다. 예를 들어 특정 element의 크기나 위치를 가져와야 하는 경우, 아니면 스크롤바 위치를 가져오거나 설정해야 하는 경우, 포커스를 설정해줘야 하는 경우 등 다양한 상황들이 있을 수 있다. Chart.js와 같은 그래프 관련 라이브러리를 사용하게 될 때에도 특정 DOM에 라이브러리를 적용하기 때문에 DOM을 선택해야 하는 상황이 발생할 수 있다. 그럴 때는 리액트에서 'Ref'라는 것을 사용한다. 함수형 컴포.. 공감수 1 댓글수 0 2021. 7. 23.
React(리액트): input 상태 관리하기, input 여러 개 input 상태 관리하기 이번에는 리액트에서 input상태를 어떻게 관리하는지 알아보도록 하자. InputSample.js import React from "react"; function InputSample() { return ( 초기화 값: 어쩌고저쩌고... ); } export default InputSample; 다음과 같이 입력한 것이 '값:'에 표시되고 초기화를 누르면 입력창이 비워지는 예제를 통해 알아보자. 이전에는 onClick이라는 이벤트를 관리했는데 이번에는 input에서 onChange라는 이벤트를 관리해 볼 것이다. import React from "react"; function InputSample() { const onChange = (e) => { console.log(e.ta.. 공감수 3 댓글수 0 2021. 7. 23.
React(리액트): useState를 통한 동적 상태 관리 지금까지 만들어봤던 리액트 컴포넌트들에는 동적인 부분이 하나도 없었다. 값이 바뀌는 일이 없었던 것. 이번에는 컴포넌트에서 보여주어야하는 내용이 사용자와의 intercation에 따라 바뀌어야 할 때 어떻게 구현할 수 있는지에 대하여 알아보자. 리액트 16.8이전 버전에서는 함수형 컴포넌트에서는 상태 관리를 할 수 없었다. 그런데 리액트 16.8에서 'hooks'라는 기능이 추가되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 이번에는 'useState'라는 함수를 사용해 볼 건데, 이게 바로 리액트의 hooks 중 하나다. 정말 진부한 예제 중 하나인 버튼을 누르면 숫자가 바뀌는 카운터를 만들어 useState함수를 알아보자. Counter.js function Counter() { retu.. 공감수 0 댓글수 0 2021. 7. 22.
React(리액트): 조건부 렌더링 조건부 렌더링이란, 특정 조건이 참인지 거짓인지에 따라서 다른 결과를 보여주는 것을 의미한다. App.js function App() { return ( ); } App 컴포넌트의 4번 줄에서 Hello 컴포넌트에게 isSpecial을 넘겨준다. * isSpecial={true}를 그냥 isSpecial로 바꾸어도 결과는 동일하다. Hello.js import React from "react"; function Hello({ color, name, isSpecial }) { console.log(name, color); return ( {isSpecial ? * : null} 안녕하세요 {name} ); } Hello.defaultProps = { name: "이름없음", }; export default.. 공감수 0 댓글수 0 2021. 7. 21.
React(리액트): props(properties), defaultProps, children 리액트에서 props는 컴포넌트를 사용할 때 특정 값을 전달해주는 역할을 한다. App.js import "./App.css"; import Hello from "./Hello"; function App() { return ; } export default App; App 컴포넌트에서 Hello 컴포넌트에게 name이라는 값과 color를 전달해주고 싶다면, 4번 줄과 같이 코드를 작성하면 된다. 여기서 name="react" color="red"가 바로 props이다. Hello.js import React from "react"; function Hello(props) { console.log(props); return ( 안녕하세요 {props.name} ); } export default Hell.. 공감수 0 댓글수 0 2021. 7. 21.
React(리액트): JSX 규칙 (태그, 중괄호{}, 주석) JSX의 기본 규칙 알아보기 JSX는 리액트에서 컴포넌트의 생김새를 정의할 때 사용하는 문법이다. 얼핏 보기에는 HTML처럼 생겼지만 사실 자바스크립트이다. 'BABEL(바벨)'이라는 도구를 사용해서 XML 형태의 코드가 자바스크립트로 변환이 되는 것이다. BABEL이라는 도구가 JSX라는 문법을 사용해서 XML형태로 선언하면 이걸 자바스크립트로 변환해준다. 이렇게 JSX로 작성한 코드가 자바스크립트로 제대로 변환되려면 준수해야할 몇 가지 규칙이 있다. 지금부터 그 규칙들을 알아보자. 첫 번째, 태그는 꼭 닫혀있어야 한다. import "./App.css"; import Hello from "./Hello"; function App() { return ( 공감수 0 댓글수 0 2021. 7. 20.
React(리액트): 리액트는 어쩌다가 만들어졌을까 리액트 라이브러리는 어쩌다가 만들어졌을까? 리액트라는 라이브러리가 어쩌다가 만들어졌는지 알면 리액트를 이해하는데 도움이 될 것이다. JavaScript를 사용해서 HTML로 구성한 UI를 제어해보았다면 DOM을 변형시키기 위해서 어떤 작업을 해야 하는지 익숙할 것이다. 여기서 DOM이란, 각 HTML element에 대한 정보를 지니고 있는 자바스크립트 객체이다. DOM을 변형하려면 브라우저의 DOM Select API를 사용해서 특정 DOM을 선택한 뒤에, 특정 이벤트가 발생하면 변화를 주는 작업을 해주어야 한다. const number = document.getElementById("number"); const increase = document.getElementById("increase"); co.. 공감수 0 댓글수 0 2021. 7. 20.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.