생각 메모(0)

- 리액트에서 그럼 리플로우랑 리페인트(리드로우) 대신에 종합적인 리콘실리케이션(재조정 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;