영벨롭 개발 일지

[ 상태 관리 ] useState()는 컴포넌트에서 바뀌는 값을 관리하는 함수입니다. 리액트 컴포넌트에서 동적인 값을 상태(state)라고 부르는데, 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에 상태 관리가 필요합니다. React Hooks이 나오기 전까지는 클래스 기반의 컴포넌트를 사용하여 상태값을 관리할 수 있었지만, 클래스 기반의 컴포넌트는 유지 보수가 힘들다는 단점이 있습니다. 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었는데요! 이때 사용하는 함수가 useState() 함수입니다. [ useState ] useState()는 상태의 초기값을 인수로 전달 받아 호출됩니다. 이때의 반환값은 상태를 나타내는 배열로, 배열의 첫..

[ MPA와 SPA ] ★ MPA MPA는 Multiple Page Application으로 여러 개의 페이지로 구성된 웹 어플리케이션을 의미하며 SSR(Server Side Rendering)방식으로 렌더링합니다. MPA는 서버에 새로운 페이지를 요청할 때마다, 신규 페이지를 불러와 페이지 리소스가 다운로드 되어 그에 맞춰 전체 페이지를 다시 렌더링하게 됩니다. 장점 단점 - 크롤링하기에 적합하다. (SEO 관점에서 유리) - 서버에서 이미 렌더링해 가져오기 때문에 첫 로딩 시간이 짧다. - 새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링한다. (깜빡임 현상) - UI를 개발할 때 반복적인 코드를 삽입해야 한다. - 한 번 수정할 때는 페이지 전체를 수정해야하기 때문에 유지보수에 어려움이 있다..

[ 자바스크립트의 배열 ] const arr = ["apple", "banana", "orange"]; 배열은 여러 개의 값을 순차적으로 나열한 자료구조입니다. 배열이 가지고 있는 각각의 값을 '요소 element' 라고 부르며, 자바스크립트의 모든 값(원시값, 객체, 배열, 함수 등)은 배열의 요소가 될 수 있습니다. 배열의 인덱스는 다른 프로그래밍 언어들과 같이 zero based 인덱스로, 0부터 시작합니다. 사실, 자바스크립트에 배열이라는 타입은 존재하지 않습니다! 배열은 객체 타입이지만, 일반 객체와는 구별되는 특징이 있습니다. 배열은 객체와 달리 값의 순서와 length 프로퍼티를 갖고 있기 때문에 순차적으로 요소를 접근할 수 있다는 장점이 있습니다. 객체 배열 구조 프로퍼티 키와 프로퍼티 값..

[ 타입 변환이란? ] 자바스크립트의 모든 값은 number, string, boolean 등과 같이 타입을 가지고 있습니다. 자바스크립트의 타입 변환에는 개발자가 의도적으로 값의 타입을 변환하는 명시적 타입 변환(explicit coercion, 타입 캐스팅)과, 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 암묵적 타입 변환(implicit coercion, 타입 강제 변환)이 있습니다. 명시적 타입 변환이나 암묵적 타입 변환이 기존 원시 값을 직접 변경하는 것은 아닙니다. 원시 값은 변경 불가능한 immutable한 값이기 때문이죠. 즉 타입 변환은 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것입니다. let x = 10; // 명시적 타입 변환 ..

// src/Hello.jsx import React from "react"; function Hello() { return ( Hello World ); }; export default Hello; [ styled-components 패키지 사용 ] styled-components는 CSS-in-JS 라이브러리 중에서 가장 널리 사용되고 있는 라이브러리 입니다. 터미널에서 다음 명령어를 입력하여 패키지를 설치합니다. // for yarn $ yarn add styled-components // for npm $ npm i styled-components 스타일을 정의하실 때 작은 따옴표(' ') 아닌, 벡틱 기호(물결기호와 같은 키를 공유하는 ` `)임을 주의하세요! 기본형 (확장자는 .js 또는 .j..

https://reactjs.org/docs/components-and-props.html Components and Props – React A JavaScript library for building user interfaces reactjs.org [ Component 란? ] React는 컴퍼넌트 기반의 개발(Component Based Development)이라고도 불립니다. 컴퍼넌트 Component는 UI를 독립적이고, 재사용이 가능한 개별적인 조각으로 나눌 수 있게 하는 리액트 앱을 이루는 최소한의 단위입니다. 문서(html) + 스타일(css) + 동작(js)를 합쳐서 만든 일종의 태그라고도 할 수 있습니다. 리액트 element는 DOM 태그로 나타낼수도 있지만, 사용자가 정의한 Com..