영벨롭 개발 일지

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

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

// 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..

[ JSX 란? ] JSX란 JavaScript + XML로 자바스크립트에 XML을 확장한 문법입니다. 기본적으로 React 에서는 JS를 사용하지만 통상적으로 JSX를 사용합니다. JSX는 굉장히 직관적이며 코드의 가독성을 높여줍니다. JSX는 JS에 기반하고 있지만 완전히 같지는 않습니다. 때문에 실행을 위해서는 JSX를 JS로 변환해야하는데 이 작업을 바벨(Babel)이 해줍니다. Hello World Hello World // JS function App() { return React.createElement("h1", null, "Hello World"); } // JSX function App() { return ( Hello World ); } [ JSX 문법 ] 1. 모든 JSX 요소들은 ..

[ React 프로젝트 생성 ] 다음 블로그 포스팅을 참고해주세요:) https://iridescent-zeal.tistory.com/192?category=1279256 [React]리액트 React란? - 개발환경 세팅 [ React 란? ] React는 페이스북에서 만든 오픈 소스 라이브러리로, 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리입니다. ★ What is UI/UX ? UI는 User Interface 사용자 인터페이스로 어떠한 iridescent-zeal.tistory.com [ React 디렉토리 구조 ] ★ node_modules 폴더 설치된 패키지들과 이 패키지들이 활용될 때 사용되는 다른 패키지들이 함께 들어있는 폴더입니다. 설치된 패키지들은 package.json에서 확..