리액트 공부노트 2
본문 바로가기

컴퓨터공부/React

리액트 공부노트 2

by Life & study 2023. 8. 18.
반응형

리액트 공부노트 2

 

 

[리액트 공부노트] 리액트 실습

 

리액트 실습

import React from "react";

class Todo extends React.Component {

    // constructor(props) {
    //     super(props);
    //     this.state = { items: props.items};
    // }


    render() {
        return <div className="Todo">

            <input type="checkbox"
                   id="todo0" name="todo0" value="todo0"/>

            <label for="todo0">Todo 컴포넌트 만들기</label>

        </div>;
    }
}

export default Todo;

 

화면 구성 연습해보기

 

[리액트 공부노트]  리액트에서 컴포넌트는 크게 클래스 컴포넌트와 함수 컴포넌트로 나뉩니다. (상태 관리 가능) , (React Hook으로 상태 관리 가능) 

 

클래스 컴포넌트는 구식 방식이며, 직접적으로 상태(state)를 관리할 수 있는 반면, 함수 컴포넌트는 신식 방식으로 React Hook을 통해 상태를 관리할 수 있습니다. 각각의 컴포넌트 유형에 대한 예시와 설명을 살펴보겠습니다. 

 

클래스 컴포넌트 (상태 관리 가능) 

CounterClass.js: 

javascript
import React, { Component } from 'react';

// 클래스 컴포넌트로 카운터를 구현
class CounterClass extends Component {
  constructor(props) {
    super(props);
    // 상태 초기화
    this.state = {
      count: 0,
    };
  }

  // 카운터 값을 증가시키는 메서드
  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  // 렌더링 메서드
  render() {
    return (
      <div>
        <p>카운트: {this.state.count}</p>
        <button onClick={() => this.increment()}>증가</button>
      </div>
    );
  }
}

 

 

 


export default CounterClass;
클래스 컴포넌트에서는 this.state를 사용하여 상태를 관리하며, increment()와 같은 인스턴스 메서드를 사용하여 상태를 변경합니다. 또한 render() 메서드를 통해 컴포넌트를 렌더링합니다. 함수 컴포넌트 (React Hook으로 상태 관리 가능) 

 

함수 컴포넌트 (React Hook으로 상태 관리 가능) 

CounterFunction.js:

 

javascript
import React, { useState } from 'react';

// 함수 컴포넌트로 카운터를 구현
const CounterFunction = () => {
  // useState를 사용해 상태를 관리한다.
  const [count, setCount] = useState(0);

  // 카운터 값을 증가시키는 함수
  const increment = () => {
    setCount(count + 1);
  };

  // 반환되는 HTML 구조를 정의한다.
  // 여기에서는 count 값과 증가 버튼을 출력한다.
  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={increment}>증가</button>
    </div>
  );
};

export default CounterFunction;


함수 컴포넌트에서는 React Hook 중 하나인 useState를 사용하여 상태를 관리합니다. useState를 통해 상태 변수와 상태를 변경하는 메서드를 생성합니다. 코드의 가독성과 간결성이 더욱 향상되며, 이전 구식 클래스 컴포넌트와 유사한 작동 방식을 구현할 수 있습니다. 출력 값: 두 예제 모두 동일한 출력 값을 가집니다. 카운트 값을 보여주는 텍스트 파트와, 누를 때마다 카운트 값을 증가시키는 버튼이 출력됩니다. 해당 컴포넌트를 사용하면, 상태 변경에 따른 값은 실시간으로 업데이트됩니다.

 

 

[리액트 공부노트]

 

npm install --save-dev @babel/plugin-proposal-private-property-in-object

 

npm update @material-ui/core

 

 

[리액트 공부노트]

 

 

C:\asac_code\demo\src\frontend>npm install react@^17.0.0 react-dom@^17.0.0

 

0 verbose cli C:\Program Files\nodejs\node.exe C:\Users\seolzone\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js
1 info using npm@9.8.1
2 info using node@v16.20.0
3 timing npm:load:whichnode Completed in 4ms
4 timing config:load:defaults Completed in 8ms
5 timing config:load:file:C:\Users\seolzone\AppData\Roaming\npm\node_modules\npm\npmrc Completed in 4ms
6 timing config:load:builtin Completed in 5ms
7 timing config:load:cli Completed in 3ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:C:\asac_code\demo\src\frontend\.npmrc Completed in 1ms
10 timing config:load:project Completed in 3ms
11 timing config:load:file:C:\Users\seolzone\.npmrc Completed in 1ms
12 timing config:load:user Completed in 1ms
13 timing config:load:file:C:\Users\seolzone\AppData\Roaming\npm\etc\npmrc Completed in 1ms
14 timing config:load:global Completed in 1ms
15 timing config:load:setEnvs Completed in 2ms
16 timing config:load Completed in 27ms
17 timing npm:load:configload Completed in 27ms
18 timing config:load:flatten Completed in 4ms
19 timing npm:load:mkdirpcache Completed in 0ms
20 timing npm:load:mkdirplogs Completed in 1ms
21 verbose title npm update @material-ui/core
22 verbose argv "update" "@material-ui/core"
23 timing npm:load:setTitle Completed in 1ms
24 timing npm:load:display Completed in 1ms
25 verbose logfile logs-max:10 dir:C:\Users\seolzone\AppData\Local\npm-cache\_logs\2023-08-18T07_13_30_493Z-
26 verbose logfile C:\Users\seolzone\AppData\Local\npm-cache\_logs\2023-08-18T07_13_30_493Z-debug-0.log
27 timing npm:load:logFile Completed in 23ms
28 timing npm:load:timers Completed in 0ms
29 timing npm:load:configScope Completed in 1ms
30 timing npm:load Completed in 128ms
31 timing arborist:ctor Completed in 2ms
32 silly logfile start cleaning logs, removing 2 files
33 timing idealTree:init Completed in 2086ms
34 timing idealTree:userRequests Completed in 3ms
35 silly idealTree buildDeps
36 silly fetch manifest @material-ui/core@^4.11.2
37 silly logfile done cleaning log files
38 timing arborist:ctor Completed in 1ms
39 http fetch GET 200 https://registry.npmjs.org/@material-ui%2fcore 2334ms (cache revalidated)
40 silly fetch manifest @types/react@^16.8.6 || ^17.0.0
41 http fetch GET 200 https://registry.npmjs.org/@types%2freact 20ms (cache hit)
42 silly fetch manifest react@^18.2.0
43 http fetch GET 200 https://registry.npmjs.org/react 27ms (cache hit)
44 silly fetch manifest react@^16.8.0 || ^17.0.0
45 timing idealTree Completed in 4673ms
46 timing command:update Completed in 4698ms
47 verbose stack Error: unable to resolve dependency tree
47 verbose stack     at Arborist.#failPeerConflict (C:\Users\seolzone\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1376:25)
47 verbose stack     at Arborist.#loadPeerSet (C:\Users\seolzone\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1342:33)
47 verbose stack     at async Arborist.#buildDepStep (C:\Users\seolzone\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:917:11)
47 verbose stack     at async Arborist.buildIdealTree (C:\Users\seolzone\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:196:7)
47 verbose stack     at async Promise.all (index 1)
47 verbose stack     at async Arborist.reify (C:\Users\seolzone\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:159:5)
47 verbose stack     at async Update.exec (C:\Users\seolzone\AppData\Roaming\npm\node_modules\npm\lib\commands\update.js:64:5)
47 verbose stack     at async module.exports (C:\Users\seolzone\AppData\Roaming\npm\node_modules\npm\lib\cli-entry.js:61:5)
48 verbose cwd C:\asac_code\demo\src\frontend
49 verbose Windows_NT 10.0.19045
50 verbose node v16.20.0
51 verbose npm  v9.8.1
52 error code ERESOLVE
53 error ERESOLVE unable to resolve dependency tree
54 error
55 error While resolving: seol@0.1.0
55 error Found: react@18.2.0
55 error node_modules/react
55 error   react@"^18.2.0" from the root project
55 error
55 error Could not resolve dependency:
55 error peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4
55 error node_modules/@material-ui/core
55 error   @material-ui/core@"^4.11.2" from the root project
55 error
55 error Fix the upstream dependency conflict, or retry
55 error this command with --force or --legacy-peer-deps
55 error to accept an incorrect (and potentially broken) dependency resolution.
56 error
56 error
56 error For a full report see:
56 error C:\Users\seolzone\AppData\Local\npm-cache\_logs\2023-08-18T07_13_30_493Z-eresolve-report.txt
57 verbose exit 1
58 timing npm Completed in 5897ms
59 verbose unfinished npm timer reify 1692342811542
60 verbose unfinished npm timer reify:loadTrees 1692342811555
61 verbose unfinished npm timer idealTree:buildDeps 1692342813658
62 verbose unfinished npm timer idealTree:#root 1692342813659
63 verbose code 1
64 error A complete log of this run can be found in: C:\Users\seolzone\AppData\Local\npm-cache\_logs\2023-08-18T07_13_30_493Z-debug-0.log

 

  npm audit fix --force

반응형
저작자표시 비영리 변경금지

'컴퓨터공부 > React' 카테고리의 다른 글

리액트 Material-UI , DOM 트리 , SSR, CSR 정적 렌더링, 다이내믹 렌더링, JSX  (0) 2023.08.31
React 렌더 라이프사이클 - 클래스 컴포넌트를 중심으로, 그리고 함수형 컴포넌트에서의 렌더 사이클  (0) 2023.08.20
[Asac 웹풀스택] 리액트 설치 , 돔트리, 명령어 ,취약점  (0) 2023.08.17
[Asac 웹풀스택] 리액트공부  (0) 2023.08.16

관련글

댓글

티스토리툴바