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

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

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

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

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

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

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

컴포넌트 안에 컴포넌트를 넣어보자.. App.jsx UserList.jsx const Item = ({user}) => {}//(props)로 받지 않고 {}를 사용하여 변수 그대로 데이터를 받음 UserList.jsx 약간의 변형 const Item = (pr

출처 : Object.keys()

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

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

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

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

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

HTML 또는 XHTML, CSS, JavaScript, DOM, XML, XSLT, 그리고 제일 중요한 XMLHttpRequest 객체를 비롯해 기존의 여러 기술을 사용하는 "새로운" 접근법을 설명하는 용어. 다양한 기술을 AJAX 모델로서 결합했을 때, 웹 어플리케

settimeout : 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정js 엔진에 있는 call Stack은 한번의 하나의 일만 할 수 있음단, js 호스트 환경에서 제공하는 Web API들은 비동기적으로 처리해줌(node)\--> DOM API, setT

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환.key, value로 구성. key는 중복 불가배열과 달리 index없음.set과 달리 value 중복 가능출처 : 개발자를 위한 웹 기술

set set : 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있음 forEach사용 for of for of : 반복가능한 객체 (Array, Map (en-US), Set, String, TypedArray, arguments 객체

출처 : 개발자를 위한 웹 기술

배열 생성 Array 객체 이용 Array객체를 이용, 3개의 아이템을 저장 할 수 있는 배열 생성 Array 객체 이용 - 실제 아이템을 전달하여 생성 Array.of() 인자의 수나 유형에 관계없이 가변 인자를 갖는 새 Array 인스턴스를 만듦 배열리터럴