Soony's House

React에서 '상태관리'에 사용되는 hook에는 useState와 useReducer가 있다.useState는 간단한 상태관리를 위해 사용되지만,복잡한 로직이 있는 경우에는 useReducer를 사용하는 것이 더 구조적이고 관리하기 쉽다. useReducer의 개념과 적용한 예시 코드를 정리해보자 ! 💡useReducer 란?useReducer 는 상태(state)의 변경 로직을 컴포넌트 밖으로 분리해줌으로써 보다 명확하게 관리하는 Hook이다. → 컴포넌트 외부에 상태 관리 코드를 분리ex.function reducer(){ //...}function App(){ const [todos, dispatch] = useReducer(reducer); //...} 기본적인 사용 형태co..

💡useEffect란?- React에서 컴포넌트의 라이프사이클을 다루기 위한 대표적인 Hook이다.- 생명 주기 별 특정 로직을 수행할 수 있도록 해준다.- 전통적인 클래스형 컴포넌트에서 사용하던 componentDidMount, componentDidUpdate, componentWillUnmount를 함수형 컴포넌트에서도 사용할 수 있게 해주는 Hook임 = 주기별 사이드 이펙트(side effect)를 제어한다. * 리액트 라이프사이클 ( life-cycle ): Mount(탄생)- Update(변화)- Unmount(죽음) 으로 구성 아래의 예시 코드를 통해 useEffect를 정리해보자.// App.jsximport './App.css'import Viewer from "./com..

TodoList 앱 개발 중 간략하게 정리하면 좋을 내용이 생겨 정리하기:) 목차1. Props에 {} 전달하는이유2. map() 함수 1. Props에 {} 전달 하는 이유 일단 Props 란 리액트에서 부모 컴포넌트로부터 전달받는 데이터이다. 부모 컴포넌트로부터 props 를 전달받을 때 두 가지 방식이 있다. 1. Props 전체를 받음 const List = (props) => { console.log(props.todos); // 접근하려면 props.todos} 구조분해할당을 하지 않고 전달 props를 전달 받으면, 객체 형태(object)로 전달된다. { todos : [...] } 형태로 전달 되는 것이다.객체(object)는 key- value 쌍으로 구성되어 ..

목차1. React Hook2. custom Hook 1. React Hook💡Hook이란? Hook은 React의 함수 컴포넌트에서 상태관리와 생명주기 기능을 사용할 수 있도록 해주는 함수.기존에는 클래스형 컴포넌트에서만 가능했던 기능들을 함수형에서도 사용할 수 있도록 만들어준 리액트의 핵심 기능이다. Hook은 React 16.8에 새로 추가된 기능이며,Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다고 한다. ⚙️ 대표적인 Hook 종류useState: 컴포넌트의 상태값(state)을 저장하고 변경useEffect: 컴포넌트의 생명주기 관리 (마운트, 업데이트, 언마운트 등) useRef, useContext, useReducer, us..

목차1. useState와 set함수2. 간단한 회원가입 폼으로 흐름 살펴보기3. useRef React를 처음 배우면서 가장 먼저 접하는 Hook이 바로 useState이다. useState는 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해주는 핵심적인 기능이다. 이번 글에서는 간단한 회원가입 폼 예제를 통해 useState와 함께 사용하는 set 함수가 어떻게 작동하는지를 자세히 설명해보고자 한다. 1. useState와 set함수 ✏️useState- 컴포넌트에 state 변수를 추가할 수 있는 React Hook.- 상태값을 만들고, 이를 제어할 수 있는 함수를 함께 제공한다. 💡사용법: 컴포넌트에 state 추가하기 컴포넌트의 최상위 레벨에서 useState를 호..

목차1. JSX 란?2. JSX 특징 및 주의사항3. JSX의 CSS 적용4. JSX 속성 사용방식 1. JSX 란? JSX는 JavaScript에 XML/HTML 형태의 마크업을 작성할 수 있게 해주는 JavaScript 확장 문법 Javascript에 XML 형식의 문법을 결합한 형태React에서는 렌더링 로직과 UI 로직이 연결되어 있다고 보기 때문에, 둘을 함께 구성하는 컴포넌트 단위로 관심사를 분리함. 2. JSX 특징 및 주의사항 💡 JSX의 특징 JS 표현식 포함 가능중괄호 {} 안에 JavaScript 표현식 사용 가능예: Hello, {name}JSX도 표현식이다!JSX는 JavaScript 코드처럼 변수에 할당하거나, 인자로 전달하거나, 함수에서 반환 가능속성 정의문..

목차1. Node.js와 npm2. Common JS (CJS) 와 ES module (ESM) 1. Node.js 와 npm 💡 Node.js 란? : 자바스크립트의 런타임 환경브라우저의 밖(서버, 로컬 컴퓨터 등)에서도 자바스크립트를 실행할 수 있게 해주는 플랫폼이다. ex) app.js라는 파일을 node app.js로 실행하면 Node.js가 그 JS파일을 실행해준다. 💡Node.js를 웹개발에서 쓰는 이유 🔹 백엔드 개발Express.js 같은 프레임워크를 통해 REST API 서버를 빠르게 구축할 수 있다.비동기 처리에 강해, 많은 요청을 효율적으로 처리한다.실시간 기능 (ex. 채팅, 알림) 구현에 최적!🔹 프론트엔드 개발 환경 구축npm (Node Package M..

자바스크립트 async와 await ; 비동기 처리를 더 쉽게 ! 비동기 작업을 다루기 위해 자바스크립트는 다양한 방법을 제공한다. promise 개념과 더불어 async와 await 키워드를 사용하면 비동기 코드를 깔끔하고 읽기 쉽게 만들 수 있다. 1. async 키워드란?async는 함수를 비동기 함수로 만들어주는 키워드이다.async를 함수 앞에 붙이면, 해당 함수는 항상 Promise를 반환한다.반환값이 Promise가 아니더라도 자동으로 Promise로 감싸서 반환된다.async function getData() { return { name: "David", id: "d0228", };}console.log(getData()); 위 코드의getDa..

자바스크립트 비동기와 Promise 자바스크립트 비동기 처리와 Promise에 대해 쉽게 정리해보자!1. 자바스크립트 비동기 처리 ; 콜백 함수(Callback)자바스크립트는 기본적으로 싱글 스레드로 작동한다.그래서 시간이 오래 걸리는 작업(예: 서버 요청, 파일 읽기 등)을 그냥 실행하면 프로그램이 멈춰버릴 수 있다.이를 해결하기 위해 비동기 처리가 등장했다. 대표적인 비동기 처리 방법 중 하나가 바로 콜백 함수// 콜백함수를 사용해서, 비동기함수 안에서 콜백을 호출function add(a, b, callback) { setTimeout(() => { const sum = a + b; callback(sum); }, 3000);}add(1, 2, (value) ..

VS Code에서 수정을 다하고 git에 반영하고싶다.GUI를 이용하는 방법과 터미널을 사용하는 방법이 있다.☺️ 💡터미널을 사용하는방법 1. 터미널을 열어준다. 2. git add .뒤에 . 은 변경사항이 있는 파일 전부를 대상으로 하겠다는 뜻이다. 특정파일만 하고 싶다면 특정파일이름을 쓰면된다.git add .3. git commit -m "커밋 메시지"git commit -m "markdown" 4. git push git push 원격저장소명 브랜치명만약 git clone을 통해 저장소를 복제했다면 일반적으로 원격저장소명은 origin이며 git remote명령어를 통해 정확한 저장소명을 알아낼 수 있다.git remote브랜치를 따로 안만든상태라면 그냥 git remote origin만 ..