React Part I 치트 시트(2022년 8월 업데이트됨)

React를 최대한 빨리 배우고 싶습니까?

2022년에 이해해야 할 모든 React 주제에 대한 철저한 검토를 제공하기 위해 정말 편리한 치트 시트를 작성했습니다.
마음에 드셨다면 다음 글을 기다려주세요. 좋은 소식은 초보자에게 친숙하고 정말 간단한 개념을 다루었다는 것입니다.

여기서 게임이 시작됩니다!

반응 앱 만들기

Create React App은 React를 위한 쾌적한 학습 환경을 제공하며 React에서 새로운 단일 페이지 애플리케이션 구축을 시작하는 가장 쉬운 접근 방식입니다.

// Create a new app
npx create-react-app hello-world

// Run the created app
cd hello-world
npm start

// http://localhost:3000

구성품

구성 요소는 독립적이고 재사용 가능한 코드 조각입니다. 독립적으로 작동하고 pseudo_HTML 구문을 반환한다는 점을 제외하면 JavaScript 함수와 동일한 작업을 수행합니다. 구성 요소는 클래스 구성 요소와 함수 구성 요소의 두 가지 유형으로 분류됩니다. 이 과정은 함수 구성 요소에 중점을 둡니다.

기능성 성분

가져올 필요가 없습니다. 'react'라는 단어에서 React(React 17부터). JSX는 첫 글자가 대문자일 경우 반환되어야 합니다.

// React Component
function App(){
  return <h1>Hey, I'm Functional Component</h1>
} 

export default App;

구성 요소를 가져오는 두 가지 방법

각 구성 요소에 대해 별도의 파일이 생성됩니다. 각 구성 요소를 내보낸 다음 가져와야 합니다.

function Card(){
    return <>
<div className="card">
<h1>I'm Card.. </h1>
</div>
</>
}
export default Card

이 구성 요소는 다음과 같은 방법으로 가져올 수 있습니다. 가져오는 동안 이름을 변경할 수도 있습니다.:

import ICard from './Card'

function App(){
    return <ICard/>
}

또는 이름 내보내기...

export const Card = () => {
    return <>
<div className="card">
<h1>I'm Card.. </h1>
</div>
</>
}
export default Card

그런 다음 이 구성 요소를 가져올 수 있습니다.

import {Card} from './Card'

function App(){
    return <Card/>
}

중첩된 구성 요소

중첩된 구성 요소는 포함된 구성 요소의 하위 구성 요소입니다. 해당 부모를 기준으로 자식 구성 요소가 배치되고 표시됩니다.

// Arrow function shorthand component
const User = () => <h1>Khansa</h1>

// Arrow function component
const Message = () => {
    return <h1>Hello!</h1>
}

// Function component
function App(){
  return (
      <>
          <Message />
          <User />
      </>
  )
} 

일부 JSX 규칙이 여기에 있습니다.

JavaScript 구문 확장입니다. 우리는 사용자 인터페이스가 표시되는 방식을 지정하기 위해 React와 함께 이를 활용하는 것을 권장합니다.

상위 요소

하나의 요소만 반환(하나의 부모 요소만)

// not valid
return <h1>Hello world</h1><h2>Hi!</h2>

// valid with React fragment. 
return (
   <React.Fragment>
        <h1>Hello World</h1>
        <h2>Hi!</h2>
    </React.Fragment>
)

// valid with fragment as Well. 
return (
    <>
        <h1>Hello World</h1>
        <h2>Hi!</h2>
    </>
)

// Noted the parenthesis for multi-line formatting

클래스 대신 className을 사용하십시오.
설명: class 대신 className을 사용하는 유일한 이유는 class는 JavaScript에서 예약어이고 JavaScript의 확장인 React에서 JSX를 사용하므로 class 속성 대신 className을 사용해야 합니다.
또한 모든 속성 이름은 camelCase여야 합니다.

// not valid
return (
    <div class="card">
        I'm Card..
    </div>
)

// valid
return (
    <div className="card">
         I'm Card..
    </div>
)

모든 요소를 ​​닫는 것도 중요합니다..

return (
    <img src="image.jpg" />
    <input type="text" placeholder="write your name..." />
)

JSX 요소

표준 HTML 구성 요소와 마찬가지로 React 요소는 동일한 방식으로 작성됩니다. 합법적인 모든 HTML 요소는 React로 작성될 수 있습니다.

// valid
const input = <input type="text" />
// valid as well
<h1>I am Header</h1>
<p>I am paragraph </p>
<button>I am button</button>

JSX 함수

모든 프리미티브는 JSX 함수로 전달될 수 있습니다.

// JSX Functions
const name = "khansa";
const age = 22;
const isHuman = true;
return (
<h1>My name is {name}. I am {age} year's old.</h1>
);

JSX 조건부 렌더링

if 문만 사용하여:

import React from "react";
export default function Weather(props) {
  if (props.temperature >= 20) {
    return (
      <p>
        It is {props.temperature}°C (Warm) in {props.city}
      </p>
    );
  } else {
    return (
      <p>
        It is {props.temperature}°C in {props.city}
      </p>
    );
  }
}

또는

삼항 연산자를 사용하여

const name = "khansa";
const age = 22;
const isHuman = true;
return (
{ isHuman ? <h1>My name is {name}. I am {age} year's old.</h1> : <p>I'm not here</p>}
);

진실 값 또는 && 연산자를 활용하여

const name = "khansa";
const age = 22;
const isHuman = true;
return (
{ isHuman && <h1>My name is {name}. I am {age} year's old.</h1> || <p>I'm not here</p>}
);

||를 활용하여 오퍼레이터

const name = "khansa";
const age = 22;
const isHuman = false;
return (
{ isHuman || <h1>My name is {name}. I am {age} year's old.</h1> || <p>I'm not here</p>}
);

속성

구성 요소의 입력 값은 속성에서 가져옵니다. 구성 요소를 렌더링하고 상태를 설정할 때 사용됩니다(간단히 설명). 구성 요소의 속성은 인스턴스화된 후에는 변경할 수 없는 것으로 간주해야 합니다.

<User firstName="Khansa" lastName="Mueen" age={22} pro={true} />

기본 소품 값

양식 요소의 값 속성은 React 렌더링 프로세스 중에 DOM의 값보다 우선합니다. React가 제어되지 않는 구성 요소에 대한 초기 값을 지정하기를 원하지만 향후 업데이트는 제어되지 않도록 합니다.

const User = ({name, age, children}) => {
    return (
        <h1>Name: {name} Age: {age}</h1>
        <p>{children}</p>
    )
}

User.defaultProps = {
    name: 'Khansa',
    age: 22,
}

스프레드 연산자를 사용하여 나열

export const SpreadData = () => {
 const users =   ["khansa", "Mueen", "Arshad"]

 const data = [...users, "Moiz"]

  return <div>Users data is: {data}</div>;
};

지도를 사용하여 나열

웹 사이트에서 메뉴는 일반적으로 사실을 체계적으로 표시하는 데 사용되는 목록을 사용하여 표시됩니다. React의 목록은 JavaScript에서 목록을 만드는 방법과 유사하게 만들 수 있습니다.

const users = [
  {id: 1, name: 'khansa', age: 22},
  {id: 2, name: 'Arshad', age: 33},
  {id: 3, name: 'Mueen', age: 47},
]
function App(){
    return (
        users.map(person => {
            return <Person name={person.name} age={person.age}/>
        })
    )
} 

const Person = (props) => {
  return (
      <h1>Name: {props.name}, Age: {props.age}</h1>
  )
}

소품 객체 파괴

import React from "react"
import Card from './component/Card'

function App(){
    return(
    <div className = "App">
    <Card title="React Course" duration = "1 day"/>
    </div>
    );
}
export default App;

결론

이것들은 내가 초보자를 위해 다룬 정말 기본적인 개념이며 다음 섹션을 곧 끝내야 합니다. 추가 업데이트를 받으려면 에서 ping을 보내주세요.