개발노트

useRef를 import해주기

useRef를 할당 해주기

useRef 연결 해주기

useRef 사용

어떻게 우리에게 DOM구조로 보여졌을까?

1. DOM tree 생성(html 을 파싱하여 DOM 노드로 이뤄진 트리 생성)

2. Render tree 생성(css을 파싱하여 CSSOM생성/ DOM +CSSOM = Render tree)

3. Layout(Render tree 노드들의 위치 결정)

4. Paint(그려서 보여주기)

문제는 변화가 생길때마다, 다시 tree를 전부 생성한다는 것(예를들어 인스타에서 우리가 좋아요를 누르면 좋아요를 누른 부분만 바뀌면 좋은데 그게 아니라 전체가 다시 다 tree가 생성되어서 보여진다는 것)

virtual DOM

virtual DOM은 어느 부분이 바뀌면 그 바뀐 부분을 바로 반영하지 않고 DIFFING 알고리즘을 통하여 어떤 부분이 달라졌는지 체크를 함. 그리고 그 전과 비교하여 바뀌어진 부분을 RE-RENDER하여 바뀐 부분만 바꿔주는 형식으로 진행이됨.

어떻게?

왼쪽과 다르게 오른쪽에서는 SPAN이 하나가 추가 되었는데 자바 스크립트의 객체 형식으로 하여 children에 데이터 하나가 추가가된걸 확인할수 있음

(우선 렌더링  되지않고 메모리에서 동작 =>이후 달라진 부분 한번에 적용하는 방식으로 동작됨)

따라서, 계속 상호작용을 가지고 가면서 지속적으로 페이지가 바뀌는 경우에 더욱 효율적으로 dom관리를 할 수 있게 됨.

이렇게 스타일을 줄때 따로 만들어서 삽입하면 더

간편하게 코딩 가능함.

따로 css파일을 만들어준후에

이렇게 classname으로 불러와서 사용도 가능함 근데 class로 해도 되긴하지만 경고 문자가 뜸으로

className으로 쓰는거 추천

이렇게 터미널에서 스타일 컴포넌트를 설치하고 컴포넌트를 불러와서 이런식으로도 디자인 가능

node.js다운

npm(node package manager)

자바스크립트 라이브러리들을 설치하고 버전을 관리함.

yarn(페이스북에서 npm의 약점들을 보완한 라이브러리 관리도구)

cmd창에서 yarn 설치 이때 yarn이 잘 다운이 됐는지 버전확인을 할때 에러가 날수 있으므로 환경변수 설정을 해줘야할수도있음.

vscode에서 yarn을 사용하려고 하면 

이러한 오류가 뜰수도 있음

이럴땐 windows powershell을 관지라모드로 실행시켜서

이런식으로 변경을 해준후에 다시 vscode에서 yarn을 실행시켜주면 오류가 해결!

React

유저 인터페이스를 만들기 위한 자바스크립트 라이브러리

페이스북에서 만든 오픈소스 라이브러리

ux: user experience (사용자 경험)

ui: user interface(사용자 인터페이스)

프레임워크: 전체 설계와 구현을 주도

라이브러리: 불러와 사용되는 도구

즉 react는 ui담당임으로 프레임워크가 아니라 라이브러리임.

jsx문법

하나의 요소로 감쌈

이렇게 div태그로 감싸면 의미없는 div태그가 하나 추가되는거임 이래서

이렇게 fragment태그로 감싸주면 나중에 fragment태그가 저절로 생략이됨.

이것을 축약형으로쓸수있음.

이렇게 축약형으로 사용이 가능함 코드 깔끔해짐.

조건부 렌더링하는 방법

논리 연산자를 이용하여 코드를 더 줄일수있음.

num이 1이 맞으면 num은 1이맞습니다를 return하고 1이 아니면 num은 1이 아닙니다를 return함.