Programming

[React] React.js 강좌 17. 불변성

1. 불변성 불변성은 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만들어내는 것입니다. 필요한 값을 변형해서 사용하고 싶다면 어떤 값의 사본을 만들어서 사용해야 합니다. JS에서 원시 타입은 괜찮지만 객체 타입의 불변성을 지키는 것은 고려해야 할 부분이 있습니다. 아래와 같은 코드가 있다고 했을 때 user와 copyUser 변수는 같은 참조(Memory Address) 값을 가집니다. (객체 타입은 참조 값을 주고받습니다.) 그렇기 때문에 user가 가지고 있는 객체의 값이 변경되면 copyUser도 같은 객체를 가지기 때문에 값이 공유됩니다. 하지만 이런 작동 방식은 값을 예측할 수 없게 하거나 버그를 유발하기 때문에 불변성을 통해서 해결합니다. const user = { name: 'Choi',..

[React] React.js 강좌 16. useCallback

1. useCallback useCallback이라는 Hook함수는 useMemo와 같이 함수를 Memozation하기 위해서 사용됩니다. useCallback은 첫번째 인자로 넘어온 함수를 두번째 인자로 넘어온 배열 내의 값이 변경될 때 까지 저장해 놓고 재사용 할 수 있게 해줍니다. const callback = useCallback(함수, 배열); 만약, 어떤 React 컴포넌트 함수 안에 함수가 선언이 되어 있다면 이 함수는 해당 컴포넌트가 랜더링될 때 마다 새로운 함수가 생성됩니다. const add = () => x + y; 하지만 useCallback()을 사용하면, 해당 컴포넌트가 랜더링되더라도 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환합니다. 즉, x 또는 y ..

[React] React.js 강좌 15. useMemo

1. Memoization useMemo에 대해 설명하기에 앞서, memoization에 대한 선행 지식이 필요한데요. memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. 2. React 랜더링 구조 일반적으로 React의 함수형 컴포넌트는 다음과 같은 구조로 작성이 됩니다. function MyComponent(props) { // 어떤 로직 (JavaScript) return; /* 어떤 화면 (JSX) */ } 이렇게 작성된 컴포넌트 함수는 React 앱에서 랜더링(ren..

[React] React.js 강좌 14. useEffect

1. UseEffect useEffect는 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 Hook 함수입니다. 2. 마운트 / 언마운트 사용 src/UserList import React, { useEffect } from 'react'; function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); return ( onToggle(user.id)} > {user.username} ({us..

[React] React.js 강좌 13. useState

1. useState란? 리액트의 Hooks 기능 중 하나인 useState는 함수형 컴포넌트를 사용하는데 있어서 가장 많이 사용되는 컴포넌트 입니다. 컴포넌트에서 동적으로 변화되는 값을 state(상태)라고 부릅니다. 이 상태를 관리하기 위해 사용되는것이 useState라고하는 Hook입니다. 가장 유명한 버튼을 누르면 숫자가 바뀌는 카운터 예제를 보겠습니다. src/Counter.js import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(prevNumber => prevNumber + 1); } const ..

[React] Async & Await란?

1. Async & Await란? React에서 비동기 처리를 할때 Promise를 사용하지만 Promise의 단점을 보완하기 위해 ES7에서 async와 await라는 키워드가 추가 되었습니다. 위 키워드를 사용하면 비동기 코드를 마치 동기 코드 처럼 보이게 작성할 수가 있게 되었습니다. 2. Async 함수 async function() { return "id" } const users = async() => { return "id" } // 결과는 같습니다. 비동기 함수를 만들기 위해서는 단순하게 함수 앞에 async를 붙여서 일반 함수를 async 함수로 만들면 됩니다. 사실 위 함수를 실행시키게 되면 단순히 일반 함수처럼 값을 반환하는 것이 아니라 async()가 Fulfiled Promise를..

[React] Promise란?

1. Promise란? React에서 Promise는 비동기 처리에 활용되는 객체입니다. Promise는 주로 웹 서비스를 구현할 떄 원활한 데이터 통신을 위해 활용됩니다. 웹 페이지에서 서버로 데이터를 요청했을 때, 데이터를 모두 받기 전에 웹에 출력하려고 하는 경우를 방지하기 위해 활용됩니다. 즉, Promise 객체는 비동기 로직을 마치 동기처럼 사용할 수 있는 기능을 가집니다. 예를 들어 비동기 로직인 A, B, C 로직이 있다고 했을때 이를 Promise를 사용하지 않고 실행시키면 먼저 로직이 끝나는 순서로 출력이 되지만, Promise를 사용하면 A, B, C 순서대로 출력을 시킬 수 있습니다. 2. Promise의 상태 Promise의 상태는 아래의 3가지 상태와 같습니다. Pending(대..

[CSS] display : grid 정리

1. 개요 CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다. flex와 grid의 차이점은 flex : 한 방향 레이아웃 시스템 (1차원) grid : 두 방향(가로-세로) 레이아웃 ..

[GraphQL] GraphQL이란?

1. 개요 GraphQL은 페이스북에서 쿼리 언어로, 애플리케이션 프로그래밍 인터페이스(API)를 위한 쿼리 언어로, 클라이언트에게 요청한 만큼의 데이터를 제공하는데 우선순위를 둡니다. 이런 GraphQL은 선언형 데이터 fetching 언어라고 부르는데, 개발자는 무슨 데이터가 필요한 지에 대해서만 요구사항을 작성하면 되고, 어떻게 가져올지는 신경쓰지 않아도 됩니다. sql이 데이터베이스 시스템에서 저장된 데이터를 효율적으로 가져온다면, gql은 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것에 특화되어 있습니다. 그래서 보통 gql의 문장은 주로 클라이언트 시스템에서 작성하고 호출합니다. Rest API가 url, method와 같은 다양한 조합으로 생기는 다양한 endpoint가 존재한다..

[CSS] display : flex 정리(flexbox)

flexbox(flex) 1. 개요 일반적으로 웹페이지의 레이아웃은 css의 display, float, position 등과 같은 속성을 사용해 구현하는데, 이러한 속성을 사용할 경우 레이아웃을 표현하는 것은 굉장히 복잡해집니다. 이러한 복잡한 레이아웃을 간단하게 구현할 수 있게 나온 것이 css3에 추가된 flexbox입니다. flexbox를 사용할 경우 요소의 크기와 순서를 유연하게 배치할 수 있습니다. 2. 특징 flexbox는 뷰 포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산 시킬 수가 있습니다. 이러한 flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성됩니다. .flex_container{..