gggimmin 개발 블로그 gggimmin 개발 블로그

useState는 가장 기본적인 React의 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해준다. const [state, setState] = useState(initialState); 위 코드는 가장 기본적인 useState의 형태이다. useState 라는 함수는 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내 놓은 모습이다. state 를 변수로 사용했고, setState 를 이용해서 state 값을 수정할 수 있다. 또한, state 가 원시 데이터 타입이 아닌 객체 데이터 타입인 경우에는 불변성 유지가 중요하다. 🚀 함수형 업데이트 setState를 사용하는 방식에는 원래 우리가 사용하던 방식이 아닌, 다른 방식이 존재한다. 바로 함수형 업데이트 방식이다. // 기존에 우리가 사용..

styled-components는 우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지이다. vsc에서 이 확장 프로그램을 설치하면 styled-components 안에서 스타일 코드를 편하게 작성 가능하다. yarn add styled-components 위의 확장프로그램을 받고 나면, 적용할 프로젝트의 터미널에서 위의 명령어를 입력해 설치해준다. 🚀 styled-components 의 기본적인 사용법 // src/App.js import React from "react"; // styled-components에서 styled 라는 키워드를 import 합니다. import styled from "styled-components"; // styled키워드를 사용해서 st..

만든 React 프로젝트들은 GitHub 를 통해 배포하려면 추가적으로 처리해줘야하는 단계들이 존재했다. ( 그냥 GitHub Pages 에서 배포하려하면 아무런 주소가 뜨지 않는다. ) 여러 배포 방법들이 존재하지만 나는 이 글에선 gh-pages 패키지를 통해 배포하는 방법을 소개하겠다. ✅ gh-pages 패키지 설명 https://github.com/tschaub/gh-pages GitHub - tschaub/gh-pages: General purpose task for publishing files to a gh-pages branch on GitHub General purpose task for publishing files to a gh-pages branch on GitHub - GitHu..

불변성이란? 불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말한다. 원시 데이터 (Boolean, Number, String, null, undefined, Symbol)는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성이 없다. 만약 let number = 1 이라고 선언한다면, 메모리에는 1이라는 값이 저장된다. 그리고 number 라는 변수는 메모리에 저장된 1을 참조한다. 주소 5001 5002 값 1 ... 그런데 let secondNumber = 1 이라고 다른 변수를 선언한다면? 이때도 자바스크립트는 이미 메모리에 생성된 1이라는 값을 참조한다. 즉, 변수 number와 secondNumber는 변수의 이름은 달라도, 같은 메모리의 값을 바라보고 있는 것이다. 그래서 c..

✅ State 란? 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. 내부에서 바뀌어야하는 목적은 UI(엘리먼트)로의 반영을 위해서다. ✅ State를 만들 때는 useState( )를 사용한다. 1. useState 란? useState는 React Hook 중 하나로, 함수형 컴포넌트에서 State를 관리할 수 있게 해준다. useState를 사용하면, State를 추가하고 업데이트 하는 것이 가능해진다. import React, { useState } from 'react'; function Example() { const [name, setName] = useState('React'); //... } 위 코드에서 Example이라는 함수형 컴포넌트는 state를 가지고 있다. 이 state는 'Re..

현재는 자식 컴포넌트에서 props를 받을 때 function Todo(props){ return {props.todo} } 위와 같이 todo를 사용하는 모든 곳에서 props. 을 붙여서 사용했다. 이것을 조금 더 짧게 쓰는 방법이 있는데 바로 자바스크립트 문법의 구조 분해 할당을 이용하는 것이다. props는 object literal ( 중괄호 ' { } '를 사용하여 객체를 직접 생성하는 표기법 ) 형태의 데이터이다. 그래서 구조 분해 할당을 이용해 짧게 props 값을 추출할 수 있다. function Todo({ title }){ return {title} } 구조 분해 할당을 통해 훨씬 간단하고 깔끔해진 모습을 볼 수 있다. 만약 여러개의 props를 받는다면, { } 안에 여러개의 pro..

최근 React 개인 프로젝트를 하던 도중 git add . 를 했는데 warning : LF will be replaced by CRLF in /파일경로/ The file will have its original line endings in your working directory. 위 메세지가 뜨면서 add . 가 정상적으로 되질 않았다. 이게 어떤 뜻인지 몰라 검색해보니 이 메세지는 Git이나 다른 버전 관리 시스템에서 발생하는 것으로, 주로 Windows 환경에서 Linux 또는 macOS와 같은 다른 운영체제에서 작업한 코드를 처리할 때 나타날 수 있다. 이 메시지는 파일의 줄 바꿈 문자(line endings)가 변경되었음을 나타낸다. LF(Line Feed)와 CRLF(Carriage Ret..

Props란 ? props는 컴포넌트끼리의 정보교환 방식이다. props는 간단하게 말하면 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터이다. 다시 말해, 컴포넌트 간의 정보 교류 방법이다. 1. props는 반드시 위에서 아래 방향으로 흐른다. [부모] --> [자식] 방향으로만 흐른다 ( 단방향 ). 2. props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다. 아직 블로그에 state에 대해 작성하지는 않았지만 상위 컴포넌트에서 하위 컴포넌트로 어떻게 props가 이루어지는지 이해하기 좋아서 이미지를 가져와봤다. 수업에서 배운 내용을 가져와 props에 대해 복습해보려한다. // src/App.js import React from "react"; function App() { return ;..