MAYMIN 개발 스토리

🔷리액트를 다루는 기술 #7 🔵props ? props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. 🔵 JSX 내부에서 props 렌더링 props를 렌더링 할 때, JSX 내부에서 { } 기호로 감싸주어 사용하면 된다. const MyComponent = props => { return 이름 : {props.myName}; }; export default MyComponent; 🔵 컴포넌트 사용시 props 값 지정하기import MyComponent from "./MyComponent"; function App() { const name = '리액트' return ( ); } e..

🔷리액트를 다루는 기술 #6 🔵화살표 함수 화살표 함수(arrow function)는 ES6 문법에서 함수를 표현하는 새로운 방식이다. 일반 함수 function() {} 은 자신이 종속된 객체를 this로 가르키고, 화살표 함수 () => {}는 자신이 종속된 인스턴스를 가르킨다. 화살표 함수는 값을 연산하여 바로 반환할 때 사용하면 가독성을 높일 수 있다 ! 🔵 모듈 내보내기 / 불러오기 (export / import) const MyComponent = () => { return 나의 컴포넌트; }; export default MyComponent; export : 다른 파일에서 해당 파일을 import 할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 설정하는 것이다. import ..

🔷리액트를 다루는 기술 #5 🔵감싸인 요소 리액트 컴포넌트에서는 요소 여러개를 꼭 하나의 요소로 감싸주어야한다. 그 이유는 ? VIrtual DOM에서 컴포넌트 변화를 감지할때, 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리구조로 이루어져야한다는 규칙이 있기 때문이다. 리액트 v16이상은 기능을 사용하면 된다. import { Fragment } from 'react'; function App() { return ( hi bye ); } export default App; 동일하게 아래처럼도 사용 가능하다. function App() { return ( hi bye ); } export default App; 🔵자바스크립트 표현 JSX 안에서는 {} 를 사용하여 자바스크립트 표현식을 쓸..

🔷리액트를 다루는 기술 #4 🔵src/index.js 분석하기 ? import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); //#1 root.render(//#2 //#3 ); // If you want to start measuring performance in your app, pass a function // to log results (for ex..

🔷리액트를 다루는 기술 #3 🔵import ? import logo from './logo.svg'; import './App.css'; 특정 파일을 불러오는 역할. 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import를 사용하여 다른 파일을 불러와 사용가능하다. 모듈을 불러와서 사용하는 것은 브라우저에는 없던 기능이다. 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js에서 지원하는기능이다. > Node.js에서는 require구문사용. 이러한 기능을 브라우저에서 사용하기위해 번들러를 사용한다. > 번들은 묶는다는 의미이며, 파일을 묶듯이 연결한다. 번들링 https://maymin-5tory.tistory.com/98 [React] 번들링(Bundling) 이해..

🔷리액트를 다루는 기술 #2 🔵DOM Document Object Model의 약어이다. 즉 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다. 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다. DOM은 트리형태이며, 특정 노드를 찾기/수정/제거/삽입 가능하다. ㄴ 하지만 이는 동적 UI에 최적화되어있지 않다. 사실 DOM 자체는 빠르다. 하지만 웹 브라우저 단에서 DOM에 변화가 일어나면, 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하는데 이 과정이 오래걸린다. 해결방법은 ? Virtual DOM !! 🔵Virtual DOM Virtual DOM이 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여..