React에 대해 알아야 할 사항

React 란 무엇입니까?

React는 JavaScript 라이브러리입니다. React는 얇고 다른 타사 라이브러리와 혼합하기가 매우 쉽습니다.

npx create-react-app my-app
cd my-app
npm start

React 예제를 볼 때 이미 JSX 가 작동하는 것을 보았을 것입니다 .

const rootElement =
 React.createElement(‘div’, {},
   React.createElement(‘h1’, {style: {color: ‘red’}}, 
     ‘The world is yours’),
   React.createElement(‘p’, {}, 
     ‘Say hello to my little friend’)
 )
ReactDOM.render(rootElement, document.getElementById(‘app’))

가상 DOM (VDOM)은 UI 표현이 표준 또는 "가상"메모리에 저장되고 ReactDOM과 같은 라이브러리에 의해 "실제"DOM과 동기화되는 프로그래밍 개념입니다. 이 과정을 재결합이라고합니다. 그들은 응답으로 "가상 돔"의 구현에서 나무처럼 보입니다.

구성 요소:

React 구성 요소는 데이터의 모양이 비슷합니다. 한 웹 사이트에 섹션이 너무 많습니다. 때로는 일부 섹션의 구조가 동일하지만 데이터가 동적임을 알 수 있습니다. 이 상황에서 우리는 코드를 다시 작성해야합니다. 반응 컴포넌트를 사용하면 코드를 복제 할 수 없습니다. 그것이 구성 요소의 주요 아름다움입니다.

function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}

Styled-components는 React 및 React Native 용 라이브러리로, JavaScript와 CSS가 혼합되어 작성된 애플리케이션에서 컴포넌트 수준 스타일을 사용할 수 있습니다.

First we need to install styled-components library
npm install styled-components --save
Now we can create a variable by selecting a particular HTML element where we store our style keys
const Div = styled.htmlElemnet`color: pink`

때때로 우리는 한 구성 요소에서 다른 구성 요소로 일부 데이터를 전달해야합니다. Props는 부모 구성 요소에서 자식 구성 요소로 데이터를 전달할 수있는 방법입니다. 소품은 소형 애플리케이션에 매우 효과적입니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />      <Welcome name="Cahal" />      <Welcome name="Edite" />    </div>
  );
}

useState
useEffect
useContext

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

npm install react-router-dom

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/topics">
            <Topics />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

React에서 인라인 스타일은 문자열로 지정되지 않습니다. 대신, 키가 스타일 이름의 camelCased 버전이고 값이 스타일 값 (일반적으로 문자열) 인 객체로 지정됩니다.

import React from ‘react’;
const divStyle = { margin: ‘40px’, border: ‘5px solid pink’};
const pStyle = { fontSize: ‘15px’, 
textAlign: ‘center’}; const Box = () => ( 
    <div style={divStyle}> 
        <p style={pStyle}>Get started with inline style</p> 
    </div>
); export default Box;

Context-API는 구성 요소에서 일부 데이터를 전달하는 또 다른 방법입니다. 우리는 소품이 부모 구성 요소에서 자식 구성 요소로 데이터를 전달할 수 있다는 것을 알고 있습니다. 그러나 때로는 자식에서 부모 또는 동일하지 않은 다른 구성 요소로 데이터를 전달해야합니다. 이 상황에서 우리는 Context-API를 사용하고 반응 앱의 모든 구성 요소에서 데이터를 쉽게 전달합니다.