1. if () {} 2. &&{ cars.length && { cars.length } } 3. condition ? A : B (참이면 A, 거짓이면 B)
프로그래밍/React
React Components 는 항상 HTML 문서를 반환한다. 이때 JSX 문서 형식을 이용한다. 클릭과 같은 이벤트와 CSS 도 같이 넣을 수 있다. 하나의 완성된 HTML 문서라고 생각하면 된다. 이제 레고에서 하나의 블록을 만들었다고 생각하자. 원하는 모양의 html 문서를 조합하면 된다. 조합된 html 문서는 보였다 안보였다 하면서 화면을 변경한다. React 에서도 JavaScript 와 비슷하게 적용한다. JavaScript Eventonclick="shoot()" React EventonClick={shoot}
시나리오 1. useState를 통해서 변수에 값을 저장하고 변경할 수 있었다. 2. 변수가 언제 변경되는지 알 수 있을까?3. 이때 필요한 것이 useEffect 이다. 4. 변수가 변경될 때마다 useEffect 는 동작한다. (fetch, timer 에서도 감지한다.) 변화에 대한 감지를 다음과 같이 구분할 수 있다. 1. 모든 변화에 대해서 감지2. 특정 변수에 대해서만 감지3. 처음 한번만 감지 사용형식useEffect(, ) # 모든 변화에 대해서 감지함.import { useState, useEffect } from "react";const [count, setCount] = useState(0);useEffect(()=>{ console.log('감지');}); setCount(count..
React 에서 데이타의 흐름은 부모 컴포넌트에서 자식 컴포넌트로 흐른다. 반대로는 불가능하다.이말은 부모는 자식을 변화시킬 수 있지만, 자식은 부모를 변화 시킬 수 없다. 규모가 커지고 복잡해진다면? 혹시 자식이 부모를 변화시킬 수 있다면? 화면 랜더링은 너무나 복잡해진다. 전역 변수를 선언하고 각각의 컴포넌트에서 확인하면 간단하지 않을까?하지만 해결 해야할 중요한 문제가 있다? 전역 변수를 참조하는 컴포넌트가 변수의 변화를 자동으로 감지해서 화면을 갱신해야 한다.즉 이벤트를 구독하고 화면을 갱신하는 프로그램을 제작해야 한다. 이러한 문제를 해결해 주는것이 Redux 모듈이다. 우선 저장소가 필요하다./redux/store.jsimport React from 'react';import { config..
설치npm install react-router-domimportimport { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'; 사용법 (v6부터 Switch 에서 Routes로 변경됨) Home About Contact } /> } /> } />
React 학습 기본 단계JavaScript 기본기 다지기:React는 JavaScript 기반이므로, JavaScript 문법과 개념을 충분히 이해하고 있어야 합니다.ES6+ 문법 (let, const, arrow functions, destructuring, spread operator 등)을 학습합니다.React 설치 및 환경 설정:Node.js와 npm을 설치합니다.Create React App 도구를 사용하여 React 프로젝트를 초기화합니다.JSX 문법 이해하기:JSX는 JavaScript를 확장한 문법으로, HTML과 비슷하게 생겼지만 JavaScript 코드 내에서 HTML을 작성할 수 있게 합니다.JSX의 기본 문법과 사용 방법을 익힙니다.컴포넌트 이해하기:React의 핵심은 컴포넌트입니..
useMemo 훅은 특정 계산을 메모이제이션하여 성능을 최적화하는 데 사용됩니다. 이 훅을 사용하면 불필요한 계산을 피할 수 있습니다. 즉, 종속성 배열이 변경되지 않는 한 이전 계산 결과를 재사용합니다 import React, { useMemo } from 'react';const MyComponent = ({ items }) => { const computedValue = useMemo(() => { // items 배열에 대한 복잡한 계산 수행 return items.reduce((acc, item) => acc + item.value, 0); }, [items]); return ( Computed Value: {computedValue} );}; 위의 예제..
npm run build 명령어는 React 애플리케이션을 배포할 준비가 된 최적화된 형태로 빌드합니다. 이 명령어를 실행하면, 프로젝트 디렉토리의 루트에 build라는 폴더가 생성되고, 이 폴더 안에는 애플리케이션을 배포할 수 있는 정적 파일들이 포함됩니다. 다음은 npm run build 명령어가 하는 주요 작업들입니다:npm run build의 주요 작업코드 번들링 (Bundling):Webpack과 같은 번들러를 사용하여 모든 자바스크립트, CSS, 이미지 파일 등을 하나의 파일이나 여러 개의 파일로 결합합니다.코드가 번들링됨으로써 브라우저가 애플리케이션을 로드할 때 필요한 HTTP 요청의 수가 줄어들어 성능이 향상됩니다.코드 압축 (Minification):JavaScript와 CSS 코드를 압..
는 React에서 개발 모드에서 사용되는 특별한 컴포넌트로, 애플리케이션에서 잠재적인 문제를 감지하는 데 도움을 줍니다. 이는 특히 개발 환경에서 유용하며, 프로덕션 빌드에서는 영향을 미치지 않습니다.주요 기능오래된 API 사용 감지:React는 시간이 지나면서 일부 API를 더 이상 사용하지 않도록 권장하거나 제거할 수 있습니다. StrictMode는 이러한 오래된 API를 사용하는 코드를 감지하고 경고를 표시합니다.부실한 생명주기 메서드 감지:componentWillMount, componentWillReceiveProps, componentWillUpdate와 같이 React 16 이후로 사용을 권장하지 않는 생명주기 메서드의 사용을 감지하고 경고를 표시합니다.함수 컴포넌트 내에서의 부적절한 사용 ..
컴포넌트 형태2가지 방법Classfunction React 16.8 이후부터 function 을 이용해서 만든다. function Car() { return Hi, I am a Car!;}const root = ReactDOM.createRoot(document.getElementById('root'));root.render(); 항상 HTML return 을 해야한다. Props매개변수처럼 컴포넌트에 속성값으로 전달할 수 있다. 전달방법1function Car(props) { return I am a {props.color} Car!;}const root = ReactDOM.createRoot(document.getElementById('root'));root.render(); 전달방법2expo..
ES6를 알고 있어야 하는 이유? 최근 트랜드로 대두되고 있는 프레임워크 (react, vue등)이 개발 환경을 ES6으로 맞춰가고 있기 때문에 ES6에 주목할 필요가 있다. JavaScript ES6 ( ECMAScript 2015 또는 ECMAScript 6 이라고도 함 )은 2015년에 도입된 최신 버전의 JavaScript입니다. ClassesArrow FunctionsVariables (let, const, var)Array Methods like forEach() / map() / reduce()DestructuringModulesTernary OperatorSpread OperatorTemplate String Classesclass Expedition extends Vacation { ..
