개발괭발메모장

그래서 리액트가 뭔데? 라이브러리, 조합형. JSX문법을 씀. 컴포넌트 단위로 잘나눠야함

prpos 로 상위에서 하위로 내려줄수있음. 루트요소에 리턴해주는게 중요하군. 모듈단위로 잘 나눠야한다. Example 같은 컴포넌트 작성의 네이밍 규칙도 있고, 컴포지션(합성)의 개념이라는 것도 있다. 스타일이 중복되고 재사용되는걸 아 이렇게 표현하는구나. 다 비슷비슷하네 묶어주는걸 의미하는군 children 이란 예약어가 있어 와 이걸 이제알았어. props.children ...ㅠㅠ 어쩐지 여기저기서 말도안하고 쓰더라 .. 요즘은 모든 파일에 react import 하진 않는구나. 과거엔 reactCreateElement 같은것도 있었군. JSX 문법은 대안이었구나. 하지만 명시적으로는 import react 다 써주는게 좋군. 컴포넌트 파일 구성은 보자... 그냥 정리하는거네 체계적인 폴더구분이 중요. state. ... 선언적 접근법...  인터렉티브의 기본이라. 모듈로 이벤트 정의 상태변경의 핵심은 이벤트를 어떻게 전달하는냐겠지. on으로 시작하는 이벤트들이 JSX에 내장되어있어. 이게 중요하네. 함수를 컴포넌트에 바인딩하는것. 그럼 이벤트 리스너에 등록 된다. 이걸 헨들러 방식이구나. () 로 해버리면 실행되니 주의.(포인터로 전달됨) 함수 이름의 관례는 뭐시기핸들러(clickHandler) 프로젝트에 따라 알아서 할것. 클릭핸들러가 컴포넌트에 반영된것이 왜 적용이 안된걸까 DOM에? 리액트는 이런식으로 동작하지 않음... 펑션콜을 React에서 평가할 때 실행 순서가 다르구나. 그럼 어캐바꾸는데? ㅇㅇㅇ.. 재평가 되는 방법은 state를 쓰는거구나 그래서 아ㅏ아....... 어쩑지 트리거되지 않았군 그래서 ..useState 라는 훅을 쓰는거구만 그냥 썻더니 아휴... 재호출되도록 하는 좋은 친구ㅏ. 배열과 업데이트 함수가 순서대로 인자에 반환됨.  그래서 title, setTitle 썼던거구나. 뷰랑 다르네 ㅇㅇ.. 스벨트가 좋다. 아무튼 훅으로 관리한다는 개념이 저런거구나.. state를 다시 보네 여기서. ㅇㅋㅇㅋ.재평가됨. 평가는 예약인것이고 바로 바뀌지 않는다. UX에서는 후에 바뀌기때문에 반영되는 개념을 기억해. 재평가 되는 과정은 빠름. 키컨셉임. const로 쓰는 이유는 컴포넌트 인스턴스로 등록하기 때문인거같은디? 변경되지 말라고 하는거 아냐? ㅇㅇ.. 그렇네. 잘못건드릴수있으니 특정 컴포넌트에서만 재평가하라고. 다른곳에 영향받지말라고. 결론은 useState 훅에 상태를 잘 등록해두자. 그리고 초기상태를 추적하는 형태가 있으니, state 추적이 가능한거군. 상태값과 업데이트함수를 기억해! 자. 이건 또 여러가지 로 업데이트 될 수 있구나. 입력값을 위한 폼 모듈에 대해 export default 로 정의한다. (하나밖에없으니까 ㅇㅅㅇ) 폼 만드는건 기본적이고... 잘 분리해서 관리하면 좋다. 사용자 입력은 어찌 관리하나... onChange 같은걸로 하긴 하네. changeHandler 에는 자동으로 event 가 넘어와 편리하긴하구나.state 다중관리도 있는데.... 방법은 뭐 useState 여러번 쓰는거아닌가맞네ㅋㅋㅋ event.target.value 오랫만~  컴포넌트당 여러 상태를 가지는것은 좀 중요한듯... 근데 이 대신 쓰는 방법이 있다. 대안 대안 대안...같은개념으 반복되니 객체로 전달하면 한번에 된다. 아... 1키에 1벨류로 잘 관리하게 하려면 업데이트하지 않은 값은 수동으로 복사하는 구린 방법이 있는데, 아니면 스프레드연산자로 ...값을 잃어버리지 않게 채워주면 되네. *구려
흠...  좋은 방법의 이전 state에 의존하는 state 갱신은? function으로 이전 상태와 다음 상태를 업데이트하면서 얻는 방법이군.... prevState 개념이 이렇게 들어오는구나. 잘못된 스냅샷 상태를 손수 관리하는건 수동적일 수 있으니 함수로 작업하도록 하는게 좋다.

onSubmit에 핸들러 다는것도 있고...근데 이벤트가 쏴 지면 안되니까 .event.preventDefalut()로 만들어서 디폴트 시켜버리는구나. 쏘지말라고 ㅇㅇ.. 양방향바인딩~~~~ useState로 저장한 경우, 값을 초기화 하고 싶은데~ value를 초기화 하면 되겠지. 어... 어~ 무한루프 안빠지는구나... 의외네 ..  자. 부모에서 위로 올리는 방법. 끌올이랬지? 여기도 emit을 쓸까요? 글쎄요... .... . .... .... .. .. 아... 위에서 만들어준다음 아래로 내려서 거기서 리턴한다고? prpos로 핸들러에 담아 내려주고 값받아서 재정의한다. 으흥. 체인을 걸어서 또 위로 올려 app.js 까지 올릴 수 있긴하겠네. 관습은 on어ㅓㅉ구로 정한다. state 끌올~ (State up -lifting 이라 부르기도 함.) 아무튼 컴포넌트간에 직접적인 전달은 없긴함. 그치만 맨날 루트로 끌어오리진 않고 필요한 트리까지만 올리면 된다 'ㅅ' - 아... 사용자 지정으로 prpos 정해서 투방향 바인딩하는게 이 이래서 중요하군.

cra 로 TS 프로젝트 만들고.

rm -rf node_modules

yarn set version berry

yarn install

 yarn --version

> 얀베리 3.2.0

1043  npx sb init --type react -f
...
 1047  npx sb@next automigrate
...

https://github.com/storybookjs/eslint-plugin-storybook#usage 참고 다 적용.

...
 1052  yarn add core-js
 1053  yarn storybook

---

         "@types/react": "^17.0.21",
         "@types/react-dom": "^17.0.9",
-        "autoprefixer": "^10.4.4",
+        "autoprefixer": "9.8.6",
         "babel-loader": "^8.2.2",
-        "babel-plugin-macros": "^3.1.0",
-        "babel-plugin-twin": "^1.0.2",
         "daisyui": "^2.11.0",
         "postcss": "^8.4.12",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "styled-components": "^5.3.1",
-        "tailwindcss": "^2.2.15",
+        "tailwindcss": "^3.0.23",
         "terser-webpack-plugin": "^5.3.1",
         "typescript": "^4.4.3",
         "webpack": "^5.53.0",
         "webpack-cli": "^4.8.0"
     },
     "devDependencies": {
+        "@mdx-js/react": "^1.6.22",
+        "@storybook/addon-actions": "^6.4.19",
+        "@storybook/addon-docs": "^6.4.19",
+        "@storybook/addon-essentials": "^6.4.19",
+        "@storybook/addon-links": "^6.4.19",
+        "@storybook/addon-postcss": "^2.0.0",
+        "@storybook/react": "^6.4.19",
+        "@storybook/testing-library": "^0.0.9",

autoprefixer 버전이 10버전에서 참조 패키지에 문제가 있어 9버전을..

+const tailwindcss = require('tailwindcss');
+
 module.exports = {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-    },
+    plugins: [
+        tailwindcss('./tailwind.config.js'),
+        require('autoprefixer'),
+    ]
 };

const path = require('path');
const path = require("path");
const tailwindcss = require("tailwindcss");


...

                {
                    test: /\.s?css$/,
                    loaders: [
                    // Loader for webpack to process CSS with PostCSS
                    {
                        loader: 'postcss-loader',
                        options: {
                            /* 
                                Enable Source Maps
                            */
                            sourceMap: true,
                            /*
                                Set postcss.config.js config path && ctx 
                            */
                            config: {
                                path: './.storybook/',
                            },
                        },
                    }],
                    include: path.resolve(__dirname, '../'),
                }

*끝.

- static을 메서드명 앞에다가 잘못쓰면 에러도 안나고, 동작이 안되는 경우가 있네.. 아무래도 해당 클래스 내에서만 써야하는것 같은데 이렇게 잘못 제한을 잡아 막은 경우에는... 동작 안하는 건에 대해 어떻게 디버깅 하면 될까나... 흠~..... static 코드에서 안써야지.....에러로그로 안남네.
 - ref는 사용법이 뷰랑 비슷한듯.
- 리액트 공식 한글 문서 11장 12장 내용 왜이렇게 헷갈리게 써놓은건지 모르겠네
자습서에 틱택토 해보면 해결되고 이해할 수 있는 내용을 꼬아놓은 것 같다.
A는 B다 하면 되는데 A는 블라블라해서 와하니 B한걸 우리는 B라 하고, A' 라고 하는걸 그럼 이제 B' 라고 부를 수 있게 된거다. 라고 써둔거 같아서 보는데 너무 힘들었다. 공식문서는 뷰가 진짜 보기 편했다.

- 리액트에서 그럼 리플로우랑 리페인트(리드로우) 대신에 종합적인 리콘실리케이션(재조정 or 조화과정)으로 납득하고 넘어가면 되는것인가. 갈아끼우면 끝인가... 나는 헷갈린다 -ㅅ- ... render 함수가 대충 이전과 이후 컴포넌트 돔 트리 꼬라지를 보고 다른 부분이 있으면 그부분을 교체하는건 알겠는데... 복합이야 이거? 진짜? DOM 자체는 문제가 없는데 리페인트 할 때 어떤걸 하는진 까봐야하나..

아무튼 성능면에서는 다들 짱이니까 쓰고있겠지? 맨날 편하다고 뷰만 쓰다보니 거의 생각없이 코드짜곤 했네. 최적, 효율, 그런걸 만들었나보다. 하고 지금은 생각 중... (그래 그거 가상돔 그거, 뷰도 있는 그 가벼운 버춸돔 그거) 

- 아직 그리고 JSX가 익숙하지 않다. 한달쯤 지나면 익숙해질 수 있을까? 흠... 이제 곧 한달인데... -ㅅ- 책산걸 꺼내서 훑어보자.
옛방식을 쓰고있네... ㅠㅠㅠㅠ 전자책이면 전자내용도 업데이트 되면 좋겠다

Fragment 사용은 이렇게 하네. 요즘은 이렇게하네.

import React, {Fragment} from 'react';

코드 메모.

// static을 붙인 경우, render 외부에서 에러는 안나는데 해도 응답이 없음.
    handleClk = (() => {
        this.setState({
          oneTwoNum: this.state.oneTwoNum + 1
        })
    })

    // handleClk = () => {
    //     this.setState({
    //         oneTwoNum: this.state.oneTwoNum + 1
    //     })
    // }


    // handleClick() {
    //     this.setState({
    //         oneTwoNum: this.state.oneTwoNum + 1
    //     })
    // }

졸리다. ref.current 방식으로 쓰는게맞나.

class App extends React.Component {
    // ref 사용법 제대로 익히고 간다 진짜 ㅠㅠㅠㅠㅠㅠㅠㅠ 아오 
    scrollBoxRef = React.createRef();
    handleClick = () => {
        console.log('====배고파 ㅠㅠㅠㅠ')
        console.log(this.scrollBoxRef)
        console.log('====배고파 ㅠㅠㅠㅠ')

        this.scrollBoxRef.current.scrollToBottom();
    }
    render() {
        return (
            <div>
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <ScrollBox ref={this.scrollBoxRef} />
                    <button onClick={this.handleClick} >
                                 아래로
                             </button>
                </header>
            </div>
        );
    }
}


// function App() {
//
//     const scrollBoxRef = React.createRef();
//
//     const handleClick = function () {
//         console.log("배고프다배고프다---")
//         console.log(scrollBoxRef)
//         console.log("슬슬뭐먹지-----")
//
//         scrollBoxRef.current.scrollToBottom()
//         // 허 .... 책 예제랑 전혀다르네
//     }
//
//   return (
//     <div className="App">
//       <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <ScrollBox ref={scrollBoxRef} />
//         <button onClick={handleClick} >
//             아래로
//         </button>
//       </header>
//     </div>
//   );
// }

export default App;

라이브로 다같이 무작정 따라하기를 간만에 하다가, 리액트 초보자 자습서에서 애로우펑션을 쓰면  "타이핑 횟수를 줄이고 this의 혼란스러운 동작을 피하기 위해서 아래부터는 이벤트 핸들러에 화살표 함수를 사용하겠습니다."

라고 되어있는 부분이 있다. 곱씹어보니 리액트에서? 음... JS에서? 일반적인 this와 다를까? 하고 잘 모르던 부분이라 내가 생각하던 그 결과가 안나오고 다른게 나올거라 생각했는데 이 또한 틀렸었다.

그냥 일반적인 호출

애로우 펑션으로 호출

일반 메서드 생성하지만 끝에 현재 this 위치를 명시적으로 바인딩 후 호출.

--------

아... window 가 나올 줄 알았는데... 찾아보니 Javascript 클래스 인스턴스에서 this 써야하는 메서드는 기본적으로는 this를 바인딩 해두지 않기 때문에 못찾는거라고...😰 아...

그렇다고 리액트만의 특별한 스코프가 있는것도 아니었다.

그냥... 일반적인것이었다.

참고자료

mdn bind : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

리액트 이벤트 처리 : ko.reactjs.org/docs/handling-events.html