React

goalReact란?ES6문법JSXReact를 이용한 컴포넌트 단위 개발의 장점을 이해할 수 있다.JSX와 같이 선언적인 형태의 문법을 사용하는 것의 장점을 이해할 수 있다.함수 컴포넌트와 클래스 컴포넌트를 만드는 방법과 차이를 이해할 수 있다.props의 특징과 규칙

node.js / npm / npx / create-react-app 설치하기create-react-app : React Web App의 기본 셋업을 해준다npx create-react-app \[폴더명]npx create-react-app movie-app 으로 세팅

react의 필요성 : component를 사용해서 html처럼 작성하려는 경우에 필요 / 이를 위해 react는 JSX 문법을 사용html을 반환하는 함수js의 함수처럼 재사용성이 높음아래와 같이, 두개의 Component를 렌더링할 수는 없음 ❌️react appl

goal

goal근데 Hook이 뭔가요?Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 Re

goal 리액트에 앞서 > Virual DOM . npm . web pack 1. Virual DOM : 다음에 나타날 화면의 일부노드를 미리 그려놓고, 변경된 화면의 일부노드만을 수정하는 가상화면 기술이다. 2. npm (node package manager)

goalREACT에 필요한 자바스크립트 ES6문법에 대해서 알아보자.\`\` (백틱)으로 표현하는 문자열나열된 자료를 추출 or 연결시 사용배열 , 객체 { }, 함수인자 표현식 ( ) 에서만 사용한다....으로 표현한다.

goalComponent의 모든 것기존 웹 프레임워크는 MVC 방식으로 (모델 (=>정보) / 뷰 (=>화면) / 컨트롤러 (=> 구동) ) 3가지로 코드를 분리하여 관리했다.코드를 효율적으로 관리할 수 있지만, 3가지 각 요소들의 의존성이 너무 높아서 조금만 수정하려

goalComponent의 모든 것컴포넌트 내부에서는 값을 바꿀 수 없다. 그렇다면 "값을 바꿔야 하는 경우"에는? 여기서 state가 필요하다.리액트에서는 컴포넌트의 상태를 관리하기 위해 state를 사용한다.state는 "값을 저장하거나 변경할 수 있는 객체"로 보

goalcomponent 생명주기의 모든 것모든 컴포넌트는 여러 종류의 “lifecycle methods”를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있다.=> when an instance of a component is being

goal리액트의 이벤트 처리방식에 대해서 알아보자JSX 문법을 사용해서 "함수로 이벤트 핸들러를 전달"한다.preventDefault를 명시적으로 호출해야 한다.

goal

GOALSPRINT REVIEW

goalhook에 대해서 알아보자Hook을 사용하면 component로부터 state 관련 로직을 추상화할 수 있다.따라서 컴포넌트 별로 독립적인 테스트와 재사용이 가능하다. Hook은 계층 변화 없이 state 관련 로직을 재사용할 수 있도록 도와줍니다.

goalreact hook에 대해서 알아보자react component 내에서 데이터를 가져오거나 (예를 들면, fetch를 사용해서 api 정보를 가져오는 등) DOM을 직접 조작하는 (예를 들면, onClick 등을 활용) 동작을 뜻한다.이름의 어원 : 다른 com

goalreact hook useEffect 에 대해서 알아보자.예를 들어, 외부 데이터에 구독(subscription)을 설정해야 하는 경우, 메모리 누수가 발생하지 않도록 정리(clean-up)하는 것은 매우 중요하다.effect에서 함수를 반환하는 이유는?effe

goalreact-router-dom을 사용해서 라우트하는 방법을 알아보자.웹 애플리케이션에서 사용하는 모든 구성 요소는 react-router-dom에서 가져와야한다.일반적으로 다음과 같이 라우터에서 최상위 요소를 rapping한다.history API를 사용해서

goaluseRef() 에 대해서 알아보자.코드를 통한 비교\-> (button 초기화를 클릭한 후) focus가 name으로 이동하는 것을 확인할 수 있다.

goal리액트에서 배열을 렌더링해보자

goalstyled-components로 css 구성하기효용 : 스타일을 입히는 것 + 동시에 + 해당 스타일을 가진 컴포넌트를 만들 수 있다. ex) div 스타일링 : styled.div ex) input 스타일링 : styled.input

성능최적화를 위한class - pureComponenthooks - memo

상태 (state) : 특정 시점에 프로그램이 사용하고 있는 정보 (=특정 시점에 프로그램에 대해 알고 있는 것들의 스냅샷)js 는 "완료될 때까지 실행"하는 속성이 있음리액트에서 데이터의 상태는,1) 컴포넌트 내에서 변경 가능한 데이터인 "상태"와2) 컴포넌트가 변경

JSX 사용의 이점JSX는 컴파일링 되면서 최적화되므로 빠름type-safe("어떠한 오퍼레이션(또는 연산)도 정의되지 않은 결과를 내놓지 않는 것, 즉, 예측불가능한 결과를 내지 않는 것") 하면서, 컴파일링 과정에서 에러를 감지할 수 있음 \*\* (대표적으로 '자

json 형식으로 입력"arrowParens": "always","bracketSpacing": false,"printWidth": 80,"semi": true,"singleQuote": true,들여쓰기 당 공백(띄어쓰기?) 수"tabWidth": 2,"trailin