react 12

[TIL] 2023.08.26 - React

오늘 정리한 내용들...🫠 강의 듣고 개념을 정리하는 것도 좋지만, 직접 실습해보며 배우는 시간을 늘려야겠다..! NPM / Yarn / CRA https://roqkfdlfrl.tistory.com/42 [React] NPM / Yarn / CRA NPM / Yarn NPM(Node Package Manager)은 Node.js의 기본 패키지 관리자로, npm에서 여러 패키지를 다운받아 활용할 수 있음. yarn도 npm과 같은 역할! 둘 다 자바스크립트 런타임 환경인 Node.js의 패키지 관리자 y roqkfdlfrl.tistory.com 컴포넌트(React Component) https://roqkfdlfrl.tistory.com/44 [React] 컴포넌트(Component) React Comp..

[React] rfce / JSX / Props / prop drilling / Props Children

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)

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

[React] NPM / Yarn / CRA

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로 프로젝트 생성/실행 ① 터미널에서 프로젝트를 생성할 폴더로 이동해 ..

[TIL] 2023.08.25 - 컴포넌트 / 부모-자식 컴포넌트

오늘부터 주특기 주차가 시작됐다. 걱정이 들긴 했지만 할 수 있다는 생각을 하며 힘차게 시작했는데, 강의를 듣고나니ㅎㅎㅎ 분명 한국말인데 무슨 말인지 하나도 모르겠다...🫠 과제를 낼 수 있을까 싶기도 하고, 앞선 주차들에서 기본기에 좀 더 집중할걸 하는 후회도 들고...눈물난다 증말...😭 일단 오늘 강의로 배운 거 하나라도 작성하고 다시 집중해서 머리에 넣어봐야겠다...ㅠㅠ 리액트 컴포넌트(React Component) 컴포넌트(블럭) = 함수 컴포넌트를 만든다 = html을 return 하는 함수를 만든다 함수형 컴포넌트와 클래스형 컴포넌트가 있는데, 함수형 컴포넌트를 많이 사용 컴포넌트의 가장 첫 글자는 대문자로!! 부모-자식 컴포넌트 컴포넌트는 다른 컴포넌트를 품을 수 있음 부모 컴포넌트 : 다..