React (57) 썸네일형 리스트형 [React] props 추출 [App.js] import React from "react"; import Child from "Child"; function App() { const name = "test"; return ( children props 입니다. ); } export default App; [Child.js] 구조분해 할당을 통해 파라미터안을 props -> { age, name, children } 으로 작성할 수 있음. import React from "react"; function Child({ age, name, children }) { console.log(age); console.log(name); console.log(children); return Child; } export default Child; .. [React] children props [children props] childeren props 를 생성하려면, import React from "react"; function App() { return ; } function User(props) { return {props.children}; } export default App; 이처럼 부모 컴포넌트인 App 에 의 형태로 작성해야하나, 아래와 같이 닫고 여는 태그를 작성하여 생성할 수도 있음. import React from "react"; function App() { return 안녕하세요; } function User(props) { return {props.children}; } export default App; 결과는 똑같이 '안녕하세요' 출력 Layout.js 라는 파일을.. [React] 부모-자식 컴포넌트/ props/ prop drilling props 컴포넌트 끼리의 정보 교환 방식으로, 부모 컴포넌트가 자식 컴포넌트에 물려준 데이터를 뜻한다. 1. 컴포넌트는 아래에서 위 방향으로 흐른다. [부모] -> [자식] 으로만 (단방향) 2. props 는 반드시 읽기 전용으로 취급하며, 변경하지 않는다. 컴포넌트의 속성을 props 라고 하며, 이는 파라미터를 통해 부모에서 자식으로 전달해줄 수 있다. import React from "react"; // props 를 통해 부모 -> 자식 데이터가 전달된다. function Son(props) { console.log(props); return ( 나는 {props.motherName}아들이고, {props.grandFatherName}의 손자입니다. ); } // 부모 컴포넌트에서 자식 컴포넌.. [React] 컴포넌트 만들기 다음과 같은 컴포넌트 만들기 나의 코드 import React from "react"; function App() { // const myBtn = () => { alert("클릭!"); }; return ( /* */ {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */} 이곳은 내가 만든 App컴포넌트 입니다. 클릭! ); } export default App; onClick 프로퍼티를 카멜케이스로 작성하고, 다음에 수행할 동작에 대한 함수를 {} 로 감싸서 작성. [React] 절대경로 설정 절대경로 설정 jsconfig.json 파일 생성 -> 아래와 같이 입력 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 이후 "./App.css" 가 아닌 "App.css" 로 import 해도 정상 작동함. import "App.css"; function App() { return ( Hello REACT! ); } export default App; [React] Create React App 리액트 셋업 [CRA 프로젝트 생성] ls #현재 내가 위치하고 있는 곳 확인 cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어감 yarn create react-app week-1 #프로젝트 생성 [CRA 프로젝트 실행] cd week-1 # week-1 폴더로 이동 yarn start # 프로젝트 시작 [React] npm, yarn [npm, yarn] 공통점 1. 자바스크립트 런타임 환경인 노드의 패키지 관리자 2. 애플의 앱스토어, 구글의 플레이스토어와 같이 개발자들이 만든 유용한 패키지 프로그램을 온라인 데이터베이스에 올려놓음. https://www.npmjs.com/ 그것을 쉽게 설치 및 삭제하게 해주는 관리자. 차이점 [npm] 1. node.js 를 생성할 때 자동으로 생성 2. Node Package Manager 의 약자 3. NPM 플랫폼 그 자체 [yarn] 1. 2016년 페이스북에서 개발한 패키지 관리자 2. npm 과의 호환성이 좋음, 속도나 안정성 측면에서 npm보다 뛰어남 명령어 [React] yarn 설치 오류 및 해결방법 기존 명령어 : npm intall -g yarn 나는 기존에 npm, node.js 가 깔려있어서 예상치 못한 오류가 생겼음. -> 설치 안 됨 아래와 같이 명령어 변경 : sudo npm install -g yarn 비밀번호 입력후 yarn 설치완료 및 yarn -v 로 버전확인 이전 1 2 3 4 5 6 7 8 다음
