REACT

환경설정 yarn설치 yarn이란? Facebook에서 만든 자바스크립트 패키지 매니저. npm으로 react 환경설정 하는 것보다 작은 용량으로 react환경설정 할 수 있음. powershell, cmd, vs terminal 중 설치 되는것을 골라 명령하면 됨

react 공부하기 앞서.. 자주 쓰이는 자바스크립트 코드들을 익혀보기동치구문출처 : mdn web docs

body - id가 root인 div와 index.jsx를 호출하는 srcipt를 명시index.jsx 또는 main.jsximport ReactDOM from 'react-dom/client' : 서버와 상관없이 내 컴퓨터 안에서만 작동(reload)import Ap

React version 16.8부터 추가된 상태값과 여러 React 가능을 사용할 수 있는 요소함수 컴포넌트에서 React state와 생명주기 기능을 연동 할 수 있게 해주는 함수.React에서 제공하는 내장 Hook 중 하나. 현재의 state값과 이 값을 업데이

input에 글을 입력하면 문자로 출력하기 + 초기화 시키기2개의 input 이용하기react에서 제공하는 hook 중 하나..current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체 반환반환된 객체는 component에서 유지.

App.jsx const [todoList, setTodoList] = useState([]); //todoList에 빈 배열[]이 만들어짐. setTodoList([...todoList,inputValue]) // 기존의 아이템을 유지하며, 새로운 아이템(input

출처 : Object.keys()

메모이제이션(memoization)된 값을 반환함수형 컴포넌트 - 렌더링 -> Component함수 호출 -> 모든 내부 변수 초기화= 호출하는 함수가 무거운 함수라면, 매우 비효율적 --> useMemo가 해결useMemo - 렌더링 -> Component함수 호출

useState의 대체 함수.(state, action) => newState의 형태. reducer를 받고 dispatch의 메서드와 짝의 형태로 현재 state를 반환.useReducer사용하여 active 사용자 count하기반복되는 로직을 쉽게 재사용 하기 위해

컴포넌트를 여러개 거쳐서 전달하는 상황 -> Context API를 이용하여 간단하게 구현 할 수 있음.프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리함.context 객체 생성createContext 함수 호출 시 Provider와 Consumer 컴포넌트 반환

최근 잘 사용하지 않는 컴포넌트 형태.render() 메서드를 이용하여 렌더링, JSX 반환.props를 조회해야 할 때에는 this.props를 조회.button 클릭시 count되는 프로그램을 클래스형 컴포넌트 이용하여 구현React에사 생성자 목적this.stat

className 부여하여 버튼에 스타일 주기..CSS 클래스가 중첩되는 것을 완벽히 방지.CSS Module 사용시, CSS 파일의 확장자 :.module.css리액트 컴포넌트 파일에서 해당 CSS 파일을 불러올 때 CSS 파일에 선언한 클래스 이름들이 고유해짐.

watching하여 css파일을 별도로 만들지 않고, react의 scss를 실행해보자특정 값이 true/false임에 따라 클래스명을 추가하거나, 추가하지 않을 수 있다.key(class명) : value형태로 value가 true 혹은 false로 평가됨에 따라 스

GITGit Bash가 설치 되어야 함.Git Hub 가입 & repository 만들기public으로 설정Add a README file 체크 X제어판 -> 자격증명관리자 -> window자격증명$ git config --list:qnetlify회원가입하여 진행.