230510 로그 - KKYHH

[KKYHH]

230510 로그

1️⃣

React 에서 <div></div> 와 <div /> 는 같은 의미이다
<div /> 는 <div></div> 태그의 줄임말이며 자동으로 닫히는 태그이다
더 간결하고 읽기 쉽기 때문에 요소 내에 자식 요소나 텍스트를 포함할 필요가 없는 경우는 자체 닫는 태그를 사용하는것이 좋다

Ex)
<img src=”image.jpg” /> 는
<img src="image.jpg"></img>보다 읽기 쉽다

그러나 하위 요소나 요소 내에 텍스트가 포함되는 경우
<div>Some text here</div>와 같이 여는 태그와 닫는 태그를 사용해야 한다

2️⃣

JavaScript 에서 const는 변수를 상수값으로 선언하는 키워드

element : 단순히 const 키워드를 사용하여 element 변수를 선언 이 변수에는 UI에 렌더링할 수 있는 JSX 표현식이 해당 값으로 지정

props : 부모 구성 요소에서 구성 요소로 전달되는 속성 및 해당 값을 포함하는 JavaScript 개체

Ex) <MyComponent message=”Hello” />는 값이 “Hello”인 message 속성을 MyComponent 구성 요소에 전달한다

// ParentComponent.js

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <div>
      <ChildComponent name="Alice" age={25} />
      <ChildComponent name="Bob" age={30} />
    </div>
  );
}

export default ParentComponent;

위 예시에서 ParentComponent는 ChildComponent의 두 인스턴스를 렌더링한다 각 인스턴스에는 name과 age라는 두 개의 소품이 전달된다 이러한 소품은 다음과 같이 ChildComponent에서 액세스할 수 있다

// ChildComponent.js

import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

export default ChildComponent;

위 예시에서 props는 ChildComponent에 전달된 props를 포함하는 객체이다 name 및 age 값은 점 표기법(예: props.name 및 props.age)을 사용하여 액세스할 수 있다

이 방식은 컴포넌트를 쉽게 재사용하고 사용 위치에 따라 다른 데이터를 전달할 수 있다

state : 구성 요소의 내부 데이터 및 상태를 포함하는 JavaScript 개체 setState() 메서드를 사용하여 업데이트 할 수 있다

Ex)

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
  }

  function decrement() {
    setCount(count - 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

예시에서 useState는 기능 컴포넌트 상태를 추가할 수 있는 React의 후크이다

count 변수는 현재 카운트를 보유하고 있는 상태 변수이고 setCount는 count 값을 업데이트할 수 있는 함수이다

사용자가 + 버튼을 클릭하면 increment 함수가 호출되어 setCount 를 사용하여 count 의 값을 업데이트한다

마찬가지로 사용자가 - 버튼을 클릭하면 감소 함수가 호출되어 setCount를 사용해 count 값을 업데이트한다

컴포넌트는 count 값이 변경될 때마다 다시 렌더링되어 새 개수가 페이지에 표시된다

컴포넌트 : UI 구성 요소의 동작 및 모양을 정의하는 React 컴포넌트 클래스 또는 함수를 말한다

3️⃣

props 와 router 의 차이점

router
라우터는 경로를 정의하고 React 애플리케이션의 다른 구성 요소에 매핑할 수 있는 매커니즘

props

props 는 React 애플리케이션의 컴포넌트 간에 데이터를 전달하는 방법
부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달
컴포넌트간에 데이터가 전달되는 기본 방법

Ex)

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

// Define two components
function Home() {
  return <h1>Welcome to the homepage!</h1>;
}

function About(props) {
  return <h1>About {props.name}</h1>;
}

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/about" render={() => <About name="React" />} />
      </Switch>
    </Router>
  );
}

예시에서는 React Router를 사용하여 두 개의 경로를 정의
하나는 홈페이지 (” / ”) 다른 하나는 페이지 정보 (” /about “)
사용자가 about 페이지로 이동하면 About 컴포넌트가 렌더링 되고 “React” 값과 함께 name prop이 전달된다

요약

• Router는 애플리케이션의 여러 컴포넌트를 정의 , 탐색하기 위한 매커니즘인 반면
• props는 컴포넌트 간에 데이터를 전달하는데 사용

4️⃣

ES6 클래스 ( ECMAScript )

ES 란?

Ecma International이 ECMA-262 기술규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다
자바스크립트를 표준화하기 위해 만들어졌다

ES6 란?

JavaScript 표준인 ECMAScript의 여섯 번째 버전이다

새로 배포되는 버전 외에 ES6에 집착하는 이유는
ES6에서 추가된 문법들이 기존의 문제들을 매우 깔끔하게 해결했으며 가독성 및 유지 보수성을 보강하는 문법도 대거 추가 됐기 때문이다

ES6에 추가된 기능이 Promise , Class , Arrowfunction 등이 있다

요약

• ECMAScript(=자바스크립트) 는 언어이며, ECMA-262 규격을 따른다
• 매년 새로운 버전이 배포되고 있으며 현재 최신판은 ES2020 — 이다
• ES6에서 중요한 기능들이 많이 추가됐다

5️⃣

React 컴포넌트 설정

1. const Footer = () => {}
2. export default function Footer() {}

🌟 두 방법 모두 React에서 재사용 가능한 컴포넌트를 만드는 동일한 목적을 가지고 있다

const Ex = ( ) = > { … }

• 이 구문을 화살표 함수를 사용하여 컴포넌트를 정의
• 화살표 함수는 함수 이름이 없고 상수 변수 “Ex”에 할당
• 이 구문은 간결하고 기능적 컴포넌트에 일반적으로 사용된다

(기본함수) export default function Ex() { … }

• 이 구문은 function 키워드를 사용하여 컴포넌트 정의
• 함수에는 이름이 있다 이 경우에는 “Ex”
• 이 구문은 전통적이며 본문 내에서 이름으로 함수를 참조해야 하거나 모듈에서 여러 내보내기가 있을 때 사용할 수 있다

6️⃣

기본함수 export default function Ex() { … } 를 화살표함수 const Ex = () = > { … } 로 쓰려면 맨 마지막 하단에 export default Ex; 를 넣어주어야 한다 그렇지 않으면 경로를 찾을 수 없다는 에러가 발생한다

[moneyless1989]

6️⃣
기본함수 export default function Ex() { … } 를 화살표함수 const Ex = () = > { … } 로 쓰려면 맨 마지막 하단에 export default Ex; 를 넣어주어야 한다 그렇지 않으면 경로를 찾을 수 없다는 에러가 발생한다

다음과도 같이 쓸 수 있습니다.

// Ex.js
export default () => {...}

// SomewhereWantToUseEx.js
import Ex from "./Ex"

화살표 함수에 export default를 사용할 경우, 함수에 이름을 지정할 수 없습니다. 이 경우, 외부에서는 파일 이름을 함수 이름처럼 사용할 수 있습니다.
이렇게 사용하면 하단에 export default Ex;가 없어도 됩니다.

[KKYHH]

// SomewhereWantToUseEx.js 
import Ex from "./Ex"

화살표 함수에 export default를 사용할 경우, 함수에 이름을 지정할 수 없습니다. 이 경우, 외부에서는 파일 이름을 함수 이름처럼 사용할 수 있습니다.
이렇게 사용하면 하단에 export default Ex;가 없어도 됩니다.

이 부분이 이해가 되지 않습니다!
첫번째 코드인 export default () => {...} 로 함수명이 없어도 적용이 된다는건 이해했습니다!

[moneyless1989]

다른 파일에서 export default로 옮긴 함수를 사용하고 싶을 때 어떻게 사용하는 지를 표현하고 싶었습니다.

// Ex.js에서
export default function Ex() {...}
// 다른 파일에서
import Ex from "./Ex"

// Ex.js에서
const Ex = () => {...}
export default Ex;
// 다른 파일에서
import Ex from "./Ex"

// Ex.js에서
export default () => {...}
// 다른 파일에서
import Ex from "./Ex"

위 세 코드는 모두 똑같이 작동합니다.
이런 얘기였습니다.

[KKYHH]

최고십니다 리차드 ❤️

[moneyless1989]

아니 켜두고 갔더니 이거 뭔데