본문 바로가기

리액트를 다루는 기술5

2022.08.25 p251 ~ 300 map 을 사용하여 컴포넌트로 변환할 때는 key props 를 전달해 주어야 한다. 여기서 사용되는 key 값은 각 항목마다 가지고 있는 고윳값인 id 를 넣어주어야 한다. todo 데이터는 통째로 props 에 전달해 주는 것이 좋다. 여러 종류의 값을 전달해야 하는 경우에는 객체를 통째로 전달하는 편이 나중에 성능 최적화를 할 때 편리하다. id 값은 useState 가 아닌 useRef 를 이용해서 관리한다. 왜? id 값은 렌더링되는 정보가 아니기 때문에. 이 값은 화면에 보이지 않을 뿐더러 이 값이 바뀐다고 해서 컴포넌트가 리렌더링될 필요도 없다. 단순히 새 항목을 만들 때 참조되는 값일 뿐이다. props 로 전달해야 할 함수를 만들 때는 useCallback 을 사용하여.. 2022. 7. 29.
2022.07.21 p150~250 서두에 앞으로의 독서 및 독서 기록 방식이 바뀐다는 점을 명시해 두고 본문을 시작해야 할 것 같다. 이전까지는 책을 읽고 책의 중요한 부분을 발췌하여 정리하는 식으로 공부를 진행했는데 아무래도 시간이 너무 오래 걸리는 것 대비 얻는 것은 적은 듯 하여 '빠르게 전범위를 훑고 여러 번 반복하는 것'이라는 학습 목표에는 적합하지 않다는 판단을 내렸다. 해서 앞으로는 독서 분량을 더 늘리되, 꼭 많은 내용을 블로그에 남기지는 않아야 겠다고 생각을 했다. 그래서 앞으로는 아무래도 기록하는 양이 앞서 챕터들보다 현저히 줄어들 것 같다. 5장 컴포넌트 내부에서 DOM에 직접 접근해야 할 때는 ref 를 사용한다. 단 서로 다른 컴포넌트끼리 데이터를 교류할 때 ref 를 사용한다면 이는 잘못 사용된 .. 2022. 7. 21.
2022.07.14 P101~150 proptypes 에는 array, arrayOf, bool, func, number, object, string, symbol, node, instanceOf, oneOf, oneOfType 등 여러 종류가 있다. state 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props 는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props 를 읽기 전용으로만 사용 가능. props 를 바꾸려면 부모 컴포넌트에서 바꿔주어야 함. 클래스형 컴포넌트의 state 컴포넌트에 state 를 설정할 때에는 constructor 메소드를 작성하여 설정함. 또 constructor 를 작성할 때는 반드시 super(props)를 호출해 .. 2022. 7. 15.
2022.07.12 p51~100 리액트 플젝 시에는 깃 cmd 창보다는 bash 애뮬레이터 사용이 좋음. 터미널에서 사용할 명령어를 macOS, 리눅스에서 사용하는 명령어와 통일하는 것이 주목적.) create-react-app 은 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 플젝 작업 환경을 구축해주는 도구. import 를 시용하여 다른 파일들을 불러와 사용 가능. 이렇게 모듈을 불러와서 사용하는 것 -> 원래 브라우저에는 없던 기능. node.js 에서 지원하는 기능임. 브라우저에서도 사용하기 위해 번들러를 사용. 대표적인 번들러 = 웹팩. 편의성, 확장성 때문. 웹팩 사용 시 SVG 파일과 CSS 파일도 불러와서 사용 가능. 파일을 불러오는 역할은 웹팩의 로더라는 기능이 담당. 플젝에서 컴포넌.. 2022. 7. 12.
2022.07.10 p1~50 대규모 애플리케이션 -> 자바스크립트 + 여러 프레임워크들(Anugluar, vue.. ) 이 프레임워크들은 주로 MVD 아키텍처, MVVM 아키텍처를 사용함. Angular js 의 경우 MVW 아키텍처로 애플리케이션 구조화. 이와 같은 구조의 공통점: 모델과 뷰가 있다는 것. 모델 = 애플리케이션에서 사용하는 데이터를 관리 뷰 = 사용자에게 보이는 부분 프로그램이 사용자에게서 어떤 작업을 받으면 컨트롤러는 모델 데이터를 조회하거나 수정하고 변경된 사항을 뷰에 반영 리액트는 오직 뷰만 신경 쓰는 라이브러리임. 컴포넌트는 재사용이 가능한 api 로 수많은 기능들을 내장하고 있음 사용자 화면에 뷰를 보여주는 것 = 렌더링 리액트 컴포넌트가 최초로 실행한 초기 렌더링과 컴포넌트의 데이터 변경으로 .. 2022. 7. 11.

티스토리툴바