- 리액트에서 그럼 리플로우랑 리페인트(리드로우) 대신에 종합적인 리콘실리케이션(재조정 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;'프론트 > React' 카테고리의 다른 글
| react (0) | 2022.04.15 |
|---|---|
| yarn berry + react +TS + Storybook init (0) | 2022.03.24 |
| 생각 메모(1) (0) | 2021.04.18 |
| 초보자 자습서(tutorial) 따라하다가 (0) | 2021.03.21 |
