개발일기

구조분해 할당과 Props Child 컴퍼넌트에서 어떤 props들이 실제로 쓰이는지 직관적으로 알기 쉬움 State state는 UI를 바꾸기 위해서 사용!!! state : 컴포넌트안에서 변할 수 있는 값 1) useState + onClick Event 2) useState + onChange Event

rfce / rfc 확장프로그램 React snippets(ES7+ React/Redux/React-Native snippets) 설치하면 사용 가능 App.js 함수형 컴포넌트 생성 단축키임 JSX 문법 1) 클래스명, 삼항연산자, style(인라인) style(인라인) : 태그에 스타일일 직접 넣음 2) style(변수) style(변수) : 스타일을 변수로 빼서 쓰면 재사용성 높아짐!!! Props 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터 컴포넌트 간의 정보 교류 방법 props는 반드시 위에서 아래 방향으로 흐름(= 부모 → 자식 방향으로만! (단방향)) props는 반드시 읽기 전용으로 취급하며, 변경하지 않음 부모(Mother) 컴포넌트에서 정보 전달해서 > 자녀(Child) 컴포넌트에..

React Component 컴포넌트 = 블럭 = 함수 컴포넌트를 만들어 보세요 = html을 return 하는 함수를 만들어 보세요 컴포넌트의 가장 첫 글자는 대문자로!! 컴포넌트로 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음 컴포넌트는 JavaScript 함수와 유사함 'props'라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환(return) return() 안에 최상위 태그는 하나만 있어야 함 (빈태그 도 가능!) 함수형 컨퍼넌트가 클래스형 컴포넌트 보다 사용도가 높음 함수형 컴포넌트 형식 // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)..

NPM / Yarn NPM(Node Package Manager)은 Node.js의 기본 패키지 관리자로, npm에서 여러 패키지를 다운받아 활용할 수 있음. yarn도 npm과 같은 역할! 둘 다 자바스크립트 런타임 환경인 Node.js의 패키지 관리자 yarn이 npm보다 성능적으로 조금 개선됐음 NPM / Yarn 명령어 Yarn 설치 ① 터미널에서 yarn 설치하기 npm install -g yarn ② yarn 설치(버전) 확인 yarn -v CRA(Create React App) 한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법 완제품을 설치한다 라고 생각하면 됨 (=보일러플레이트) CRA로 프로젝트 생성/실행 ① 터미널에서 프로젝트를 생성할 폴더로 이동해 ..