React 완벽 가이드21 React Components Components JSX JSX는 타겟 UI/HTML 코드를 자바스크립트 코드 바로 안(컴포넌트 바로 안)에 정의할 수 있도록 한다. JSX 코드는 트리 모양의 코드 구조를 띄며 리액트에게 각 컴포넌트들이 어떻게 연관되어 있고 UI는 어떻게 보여야 하는지 알려준다. 그 다음, 올바른 명령어를 실행하여 실제 DOM을 제어하며 타겟 구조/코드를 반영한다. React는 리액트는 JSX 코드에서 사용한 컴포넌트로 웹사이트 DOM을 업데이트할 명령어를 수행하는 컴포넌트 트리를 불러온다. Props 단일 Prop 객체 전달 자바스크립트 객체로 이미 구성된 데이터가 있다면, 그 객체를 여러 props들로 나누는 대신 하나의 props 값으로 전달할 수 있다. 또는 등등... 받은 Prop들을 단일 객체로 그룹화 여.. 2024. 3. 29. Javascript import & export import import : 다른 모듈에서 내보낸 변수, 함수, 클래스 등을 현재 파일에서 사용할 수 있게 가져오는 데 사용된다. import { add, subtract } from './math'; //main.js파일 console.log(add(5, 3)); // 8 console.log(subtract(8, 3)); // 5 위의 코드에서 main.js 파일에서 math.js 모듈에서 내보낸 add와 subtract 함수를 가져와 사용하고 있다. export //math.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b; 위의 코드에서 add와 subtract 함수를 math... 2024. 3. 28. React - the complete guide 01: Building Building index.js에서 document.getElementById('root')가 선택되면 public폴더의 index.html에서 가 선택된다. 그 후, 리액트가 이 div와 그 내용을 제어한다. const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); Eslint & Prettier with Window vscode extension으로 eslint와 prettier가 이미 설치되어있어야 한다. eslint의 airbnb 의존성 확인 yarn info eslint-config-airbnb peerDependencies 결과는 다음과 같다. yarn info v1.22.19 { eslint: '^7... 2024. 3. 28. 이전 1 2 3 4 다음