Yuniverse

과거에는 대부분의 리액트 컴포넌트를 클래스형 컴포넌트로 작성했다. 하지만 코드의 가독성을 높이기 위해 함수형 컴포넌트가 등장했다. 클래스형 컴포넌트에서만 가능했던 상태 관리 등의 기능을 함수형 컴포넌트에서도 수행하기 위해 리액트에서 내장 함수 Hook을 제공하고 있다. 대표적으로 상태(state)를 관리하는 useState가 있다. 🔗 useState useState : 함수형 컴포넌트 내부에서 상태를 관리하는 hook으로, 하나의 상태 값과 그 값을 업데이트하는 함수를 쌍으로 제공한다. import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( Count: {coun..

비동기는 작업 순서가 정확히 보장되지 않는다. 따라서 만약 비동기 처리로 얻은 데이터를 이용해야 하는 특정 작업이 있다면, 비동기 처리가 모두 완료된 후에 특정 작업을 수행할 수 있도록 제어해야 한다. 이를 위한 방법으로 콜백(call back) 함수가 있다. 🔗 콜백 함수 콜백(call back) 함수 : 어떤 함수의 인수로 전달되는 함수 function order(food, callback) { console.log(`${food} 도착`); callback(); } function eat() { console.log('먹는다'); } order('짜장면', eat); 위에 주어진 코드를 보면 order 함수는 두 개의 인자를 받는다. 첫 번째 인자는 음식 이름(food), 두 번째 인자는 콜백 함수..

1. 동기 vs 비동기 동기 비동기 의미 Syn는 그리스어로 '함께', chrono는 '시간'을 뜻한다. 동기는 작업이 동시에 이뤄지지 않아 이전 작업이 다 수행되지 않으면 다음 작업을 수행하지 못하는 상태를 말한다. (Blocking) 동기인 Synchronous 앞에 접두사 a가 붙어 반대의 의미를 가진다. 작업이 동시에 이진행되며 이전 작업이 수행되지 않아도 다음 작업이 알아서 수행되는 상태를 말한다. (Non-Blocking) 예시 창구가 1개인 은행 새로고침 O 창구가 여러 개인 은행 새로고침 X 장점 설계가 간단하고 직관적이다. 이전 작업의 결과를 기다리는 시간 동안 다른 작업을 동시 처리하여 멀티 작업을 수행할 수 있다. 단점 이전 작업의 결과가 주어질 때까지 아무것도 못하고 대기해야 한다...

1. 자바스크립트 (Javascript) Javascript는 웹 사이트에 동적인 기능을 추가하는 동적 타입 스크립트 언어이다. 🔗 동적 타입 언어란? 동적 타입 언어 : 런타임 시 타입이 결정되는 언어로 변수 재할당이 가능해 언제든지 타입이 동적으로 변할 수 있다. 사용하기 편하지만 복잡한 프로그램에서는 변수의 타입을 추척하기가 다소 어려울 수 있다. 정적 타입 언어 : 컴파일 시에 변수의 타입이 결정되는 언어로 변수 타입을 미리 사전에 선언해야 변수에 값을 할당할 수 있다. 타입으로 코드 안정성은 높지만 유연성은 떨어진다. 🔗 스크립트 언어란? 소스 코드를 컴파일 하지 않고도 실행할 수 있는 프로그래밍 언어를 말한다. C, Java 같은 언어들은 코드를 컴파일러를 통해 기계어 코드로 바꿔줘야 하지만 ..