React

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

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

replit 50개 이상의 프로그래밍 및 언어를 지원하는 통합 개발 환경 서비스 replit을 이용하여 react 시작 전 기본 구조를 익힘 기본 파일 구조 index.html

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

input에 글을 입력하면 문자로 출력하기 + 초기화 시키기 App.jsx Input.jsx onChange 폼 필드가 변경될 때 이벤트가 발생. 2개의 input 이용하기 useRef > react에서 제공하는 hook 중 하나. .current 프로퍼티로

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

출처 : Object.keys()

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

useReducer >useState의 대체 함수. (state, action) => newState의 형태. reducer를 받고 dispatch의 메서드와 짝의 형태로 현재 state를 반환. state //현재상태 dispatch //action으로 보내는 함수

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

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

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회원가입하여 진행.