구버전/React
-
[리액트를 다루는 기술] 컴포넌트구버전/React 2023. 6. 18. 15:47
컴포넌트의 종류와 특징 class형 컴포넌트 시작하면서 나오는 내용이라서 기억하는거지 요새 잘 안쓰인다고 한다 (Hook 기능이 추가되고 나서) 그래서 읽을 수 있을 정도의 능력만 갖추면 될듯.. 클래스 형태를 띄고 있어서 누가봐도 클래스형으로 보임 render()함수가 꼭 필요함 꼭 선언해주어야함(retrun 값이 이 함수 안에 들어가야한다) state 설정 시에 2가지 방법이 있는데 생성자를 선언해서 super와 this를 써서 초기화 해주는 방식과 그냥 state 객체를 만들어 주는 방법 2가지가 있다 함수형 컴포넌트 클래스형 컴포넌트보다 이점이 많은데 그중 하나가 메모리를 덜 사용하고 크기가 작다는 것(크게 중요 x) Hook을 활용해서 라이프사이클 기능과 Component 기능 임의 메서드 생성..
-
[리액트를 다루는 기술] JSX && 알쓸신잡구버전/React 2023. 6. 18. 14:34
JSX 란? 자바스크립트의 확장문법으로써 상당히 HTML과 비슷한 모습이다. 브라우저가 실행되기 전에 번들링과정에서 바벨을 사용해 JS로 변환되기 때문에 마음껏 리액트에서 사용된다.장점 : HTML이랑 유사해서 보기 좋음 ㅎ 사용 팁 : falsy한 값 중 0은 false로 나타나지 않는다. undefined 는 함수안에서 사용하지 말자 근데 JSX에서는 가능하다(tag안에 쓸 수 있다) 알쓸신잡 ES Line && Prittier 좋구요~ import 는 모듈을 불러오는 기능을 하는 놈으로써 node에서 제공하는 기능이란다 리액트는 웹펙을 이용해서 번들링을 한단다로더의 설치는 따로 해주어야하지만 creat react-app에서 자동으로 설치해준단다 번들링은 나중에 따로 찾아봐야지^^
-
[리액트를 다루는 기술] 랜더링 최적화구버전/React 2023. 6. 17. 00:24
11강 간단요약! 리스트가 랜더링을 하는 과정에서 불필요한 Component까지 랜더링이 되는 현상으로 인해 Lag현상이 생기게 되는데 이러한 현상을 막기위해 최적화를 통해서 부하를 줄이고 줄여서 클라이언트를 좀 더 빠르게 쓸 수 있게 해주는 것들에 대한 이야기 첫번째! func() 과 func 의 차이를 알아보자! 인자로써 받은 func() 과 func는 실제로 클라이언트가 랜더링 될 때마다 실행하는지 처음 랜더링 될 때 실행되고 고정인지에 대한 차이가 있다 자세히 무슨 원리일까 알아보자! 두번째! React.memo를 이용해서 감싸보자! 정말 간단하게 마지막 export 하는 부분에서 React.memo(ComponentName) 을 하고 React를 import 하는 것만으로 랜더링을 안하도록 만든..