나다김강니

ReactReact는 우리가 웹 애플리케이션을 만들 때 사용하는 프론트엔드 라이브러리로, UI를 효율적으로 구성해준다. 우리가 React 앱을 만들 때 단순히 브라우저에서 코드가 실행되는 것이 아니라, Node.js 기반의 개발 환경이 필요하다. Node.jsReact 앱을 만들 때, Node.js기반의 개발 환경이 필요하다. 1. 로컬 개발 서버 제공 React 프로젝트를 만들고 npm run start 명령어를 실행하면, Node.js가 로컬 환경에서 웹 서버를 실행한다.이 서버는 localhost:3000에서 동작함. 기능실시간으로 React코드를 브라우저에 표시코드 변경 시에 자동으로 페이지 새로고침API요청 프록시 등 개발에 필요한 기능 제공 2. 개발 도구 및 편의성 제공npm(Node Pac..

프로젝트하면서 블로그 써야지,,,써야지.... 하고 주제만 적어놓고 이제야 씀ㅋㅋ 몰아작성하기... React에서 상태를 관리할 때 토글 기능을 많이 쓴다.드롭다운 메뉴를 열거나 닫는 기능을 만들 때, 상태를 true 또는 false로 토글하는 기능!! 난 게시판에서 정렬방법 선택할 때 토글기능을 썼음. 근데 난 처음에 단순하게setFilterDropdown(!filterDropdown)이렇게 작성했단말임... 근데 찾아보니까 보통setFilterDropdown(prevState => !prevState)이렇게 쓰더라고..?? 그래서 이 두개가 뭐가 다르냐면 1. setFilterDropdown(!filterDropdown)  • 장점: 코드가 간단하고 이해하기도 쉬워. 딱히 복잡하게 생각 안 하고도 바..

UseState hook💡 useState hook     평범한 자바스크립트 변수의 값이 변경되는 경우, 화면은 다시 렌더링 되지 않는다.     값 변경에 따라 화면이 렌더링되는 화면을 만들어야 한다면, 값이 리액트 상태 변수에 저장되어야 한다.     리액트에는 use로 시작하는 함수들이 제공된다. 이 함수들을 hook이라고 부른다. button 활용import React, { useState } from 'react';import './App.css';function App() { // 0 : 상태 변수의 최초 값 // count : 현재 값이 리턴되에 대입되는 상수 // serCount : 상태 변수 값을 변경하기 위해서 호출해야하는 함수 const [ count, setCount ] ..

Props💡 props props는 propertied의 줄임말이다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다.propsMessage 함수형 컴포넌트를 호출하면서 { value: "안녕하세요", color: "blue" } 형태의 props 값 객체를 Message 함수에 전달한다.//Message 함수 컴포넌트는 props 값 객체를 파라미터로 받는다.export type MessageProps = {    value: string,    color: string}function Message(props: MessageProps) {  return ...}"key" prop 태그나 어떤 태그가 반복된 목록의 경우, 그 목록 태그에 "key" prop가 있어야 한다.그리고 ..