이것만 기억하면 리액션을 사용할 수 있다.(React 공식 튜토리얼에 따라)

28885 단어 JavaScriptReact초학자작업 일지tech

먼저


리액트로 앱의 프런트를 만들거나, 넥스트JS와 가스바이JS로 자신의 블로그를 만들고 싶어 리액트 공식 튜토리얼에 1차로 도전하기로 했다.
자습서: React 가져오기 - React
간단한 OX 게임을 통해 React의 기본 기능을 배웁니다.
React 튜토리얼로 만든 OX 게임입니다.
React-get-start
나는 그때 잘 모르는 기능을 깊이 파헤치기로 했다.

render () 는 무엇을 합니까


React에는 두 가지 렌더 방법이 있습니다.

ReactDOM.render()


어떤 분이 React의 API를 호출한 문장이 이것밖에 없다고 하셨어요. 에이, 이것만 기억하면 될 줄 알았는데 의외로 적네요. React는 간단하잖아요.
나는 이전에 이렇게 쓴 보도를 읽은 적이 있다.
React의 API를 노골적으로 호출한 게 마지막 ReactDOM이다.render()만 있습니다.그리고 이 기사에서 유일하게 등장한 리액트 API다.
사실은 그 뒤에 나타날 거예요.component,Props・State,key,<button /> 등의 개념·리액트가 삽입된 API,리액트가 HTML을 처리할 때 사용하는 외부 라이브러리JSX 등의 지식이 필요해져 학습 비용이 많이 든다.
실제 사용 방법
문서 등의 문서에 React 요소 렌더링
공식 강좌에서는 이렇게 사용된다.
ReactDOM.render(
  <Game />,
  document.getElementById('root')
);
rootID가 있는 DOM 요소(용기)에서 나타나다<Game />.
여러 구성 요소를 반환할 수 없습니다.
ReactDOM.render에 따라()
할 수 없는 예
예제 가능
render() {
    return (
        <div>hoge</div>
        <div>fuga</div>
    )
}

render() {
    return (
        <div>
            <div>hoge</div>
            <div>fuga</div>
        </div>
    )
}
렌더링은 목적 방법이므로 다른 처리를 하지 않습니다.

클래스 구성 요소에서 호출된render()

React.Component의 하위 클래스에 정의해야 하는 유일한 방법은 render()이다.그래서 등장 빈도가 높아진다.
React.Component에서 가장 먼저 호출된 것은render입니다.
React로 화면을 이동하려면 setState 방법을 사용하여 state를 업데이트합니다.
이 때,render가 자동으로 호출되기 때문에state의 변경 차이는 화면에 반영됩니다.
또한 여러 구성 요소를 반환할 수 없습니다.
공식 강좌에서 가장 신경 쓰기 시작한 render()은 여기에 쓴 학급 구성 요소라고 불리는 학급 방법이다.JSX와 같이 정의된 React 요소를 반환하는 작업이 수행되었습니다.
결말은 어디에서 실행됩니까?그렇게 생각하지만 State 값이 업데이트될 때마다 render ()가 자동으로 시작됩니까?

총결산

  • React.DOM의 render()는 실제 DOM 요소를 재현합니다.
  • React.Component의 render는this입니다.props와this.state를 조사한 후 React 요소 등을 되돌려줍니다.

    • Component


    UI를 다시 사용할 수 있습니다.
    button.js를 만들어서 <button />로 좋아하는 곳에서 불러내세요.
    조립품은 대략 두 종류가 있다.

    클래스 구성 요소


    props state,lifecycle 등의 상태를 줄 수 있습니다.

    환상적인 구성 요소


    props만 수여할 수 있으며, 불필요한 정보를 추가할 수 없습니다.하지만 Hooks를 사용하면 state,lifecycle을 줄 수 있습니다.요즘에는functional component가 주류인 것 같아요.

    실제 사용 예


    index.html
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
    App.js
    import React from 'react';

//Appというコンポーネントを作成
const App = () => {
	return (
		<div>
			<div>App</div>
		</div>
	);
};

//読み込み出来るように記述する。
export default App;
    index.js
    import React from 'react';
import ReactDOM from 'react-dom';

//App.jsを読み込む
import App from './App';

//index.htmlの#rootのdivタグ内に<div><div>App</div></div>が追加される。
ReactDOM.render(<App />, document.querySelector('#root'));

    Proops 소개


    component와 함께 사용합니다.부모 구성 요소에서 서브 구성 요소로 가치를 전달하는 구조.
  • 부모-자식 단방향
  • 받은 프로파일을 하위 구성 요소로 다시 쓸 수 없습니다.

    • 왜 사용했을까


    단지 조립품일 뿐이라면, 그것과 똑같은 것만 만들 수 있다.알아듣지 못하다.
    방금 앱 컴퍼니의 예는 앱 콘텐츠를 바꾸려고 할 때 비슷한 구성도 다시 구성요소를 만들어야 한다는 것이다. 이를 피하기 위해 props를 사용하여 구성요소를 유연성을 가지게 한다.
    const App = () => {
	return (
		<div>
			<div>App</div>
		</div>
	);
};
    부모님 Component MyApp.js
    서브어셈블리 App.js
    //APP.jsが2回それぞれのタイトル名で追加される。
<App title="My-App"/>
<App title="My-App2"/>

//index.htmlは下記のようになる。
<div>
	<div>My-App</div>
</div>
<div>
	<div>My-App2</div>
</div>
    이제 개별 title이 변경된 컴포넌트를 어셈블리에서 추가할 수 있습니다.

    이른바 State


    어셈블리 단위로 상태(숫자, 문자열, 정렬)를 유지하는 메커니즘입니다.
    import React from 'react';

//Appというコンポーネントを作成
//たぶんこんな感じになってると思う。
//親コンポーネントから{title:'My-App'}の中身を受け取る。それをpropsという連想配列?に渡す。
const App = (props) => {
	return (
		<div>
			<div>{props.title}</div>
		</div>
	);
};

//読み込み出来るように記述する。
export default App;
    구조기로 이렇게 정의하고 사용한다.
    state에서 연상으로 저장 수치를 배열해서 꺼낼 수 있도록 합니다.조금 다른 게 state 값을 업데이트해야 돼요.
    업데이트할 값을 대입this.setState()합니다.this.setState()를 통해 업데이트된 처리가 끝난 후 클래스 구성 요소에 정의된 render()가 실행됩니다.이 때문에 여러 업데이트 작업이 있는 상황에서 이러한 처리가 끝난 후render()에 운행하기 때문에 많은 render()가 운행하지 않는다.
    class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      //{squares: [null, null,.......]}
      squares: Array(9).fill(null),
      xIsNext: true,
    };
  }
    최근에는 레드룩스에 비해 후크스가 스테이트 관리에 활용되는 것이 주류가 되고 있다.하지만 이번 강좌에서는 이런 것들을 사용하지 않아도 컨디션을 관리하기에 충분하기 때문에 일단 내버려두고 싶습니다.

    키


    React에 미리 남겨진 속성이 목록 요소<li>를 동적으로 만들 때 분배됩니다.
    강좌에는 다음과 같은 내용이 있다.
    Key는 React에서 수정, 추가 또는 삭제된 요소를 식별하는 데 도움이 됩니다.수조 중의 항목에 안정적인 식별성을 제공하기 위해서는 각 항목에 키를 제공해야 한다.
    키를 사용하여 다시 그리는 작업을 최소화할 수 있습니다.
    키를 사용하지 않으면.
    this.setState({
	squares: squares,
  xIsNext: !this.state.xIsNext,
});
    이런 소자<li>의 맨 위에 <li>lion</li>를 첨가한다.
    이 경우 하나의 데이터만 추가되지만 각 요소의 순서가 하나씩 엇갈린다.라이언은 0,cat은 0→1~bird는 2→3.
    그래서 리액트에서 형제 요소는 모두 재묘사의 대상이 되어 자원을 낭비한다.

    최후


    지금 파이톤→자바스크립트→리액트(언어는 아니지만)였는데 다른 리액트 기사를 읽고 싶으면 타이피스 스크립트로 쓰니까 며칠 더 해보려고 했어요.
    새로운 언어가 꼬리를 물고 나오니 좀 피곤하다.
    앞으로의 과제
  • 강좌에서 마지막으로 배운 지식을 활용하여 이런 기능을 해봤는데 이런 과제가 있어서 그걸 했어요.
  • TypeScript로 자습서 코드를 다시 작성합니다.
    • Giithub에 주석이 붙은 코드를 남겼다.
    React 자습서(설명 첨부) 주석은 자신이 잘 모르는 코드의 동작을 남겼다.
    보도에 대한 평론 등
    🕊:
    📺:
    📸:
    👨🏻‍💻: Github
    😥: Stackoverflow
    하지만 접수는

    인용하다


    [React] setState 실행 시 render 메소드를 검증하는 작업 - Qita
    구성 요소 state-React
    react의render는 무엇을 합니까?코드로 설명합니다.|
    ReactDOM의 render() 및 ReactComponent의 render() 차이점 이해 - Qiita
    왜 React를 사용하면 jQuery가 필요 없어요? - Qita.
    구성 요소 및 props-react

    대충 읽어 보았다.


    제목은 React 학습을 수월하게 한다고 쓰여 있지만 괜찮을 것 같다.어려운 함수형 프로그래밍을 썼을 뿐입니다.
    React에서 손쉬운 JavaScript의 함수형 프로그래밍에 대한 기초 지식 - Qita 학습
    state를 이해하고 싶지만 지금은 하나도 없어요.
    [React의 state와 props의 차이점을 알고 싶다! (변경, 업데이트하는 방법 등 시연이 있다)] 과거 React 초보자의 자신에게 props와 state의 차이점 설명 | 무골일기
    [Algorithm] 그래프 탐색 - 깊이 우선 탐색 (DFS)
    [CSS] CSS Basics # 3

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage