React

React Intro Achievement Goals [ ] React의 3가지 특징에 대해서 이해하고, 설명할 수 있다. [ ] JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다. [ ] React 컴포넌트(React Component)의 필요성에 대해서 이해

SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다.SPA의 장, 단점에 대해 이해하고 설명할 수 있다.와이어프레임을 보고 어느 부분을 컴포넌트로 구분할 지 스스로 정할 수 있다.Traditional: 과거에는 페이지 이동시 페이지 전체

React에서 npm으로 React Router DOM을 설치(npm install react-router-dom)하고 이용할 수 있다.React Router DOM를 이용하여 SPA를 구현할 수 있다.라우팅 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용

state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다.React 컴포넌트(React Com

React 에서 이벤트는 소문자 대신 카멜 케이스(camelCase) 를 사용합니다.JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러; Event handler)를 전달합니다.HTML<button onclick="handleEvent()">E

React 데이터 흐름React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.State 끌어올리기의 개념을 이해할 수 있다.상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가

Side Effect (부수 효과)함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기합니다.Pure Function (순수 함수)순수 함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다. 함

<HOOK 사용코드 예시>최상위에서만 Hook을 호출합니다.React 함수 내에서 Hook을 호출합니다.빈 배열 넣기 : useEffect(함수, \[])빈 배열을 useEffect의 두 번째 인자로 사용하면, 이 때에는 컴포넌트가 처음 생성될때만 effect 함

부품단위로 UI 컴포넌트를 만들어 나가는 개발 !! 예시 사이트 (CCD이용한 사이트)BBCComponent Explorer에 있는 UI 개발도구 중 하나.컴포넌트를 문서화(재사용성)기능(1) 각각의 컴포넌트를 따로 볼수 있게 해줘서 한번에 하나의 컴포넌트에서 작업할

CSS 구조화를 위한 다양한 시도중에 CSS in JS(Styled-Component) 가 나오게 되었다.기능적(Functional) 혹은 상태를 가진 컴포넌트들로부터 UI를 완전 분리해 사용할 수 있는 아주 단순한 패턴을 제공합니다.사용 목적기존 CSS 문법으로 스타