1. rem 단위와 rm 단위
두 단위 모두 상대적인 크기 값이다.
rem : 최상위요소(root)에 대한 상대적인 값이다. 기기 종류 등에 의해 정해진다.
rm : 상위요소에 대한 상대적인 값이다.
* 파일에서는 div값 등 여러 요소가 사용되므로 rm을 사용하면 의도와 다르게 나타날 확률이 크다.
따라서 rem 사용을 더 권장하고 있다.
2. React에서의 useRef 사용.
변경되어도 랜더링되지 않게 하기 위한 상황에서 사용한다.
useState와 useRef를 사용하여 비교해 보았다.
둘 모두 button을 넣고 누르면 값이 하나씩 증가하게 하였다.
-useState는 누르자 바로 숫자가 증가하였다.
-useRef는 누르면 숫자가 변하지 않다가, useState를 한번 누르면 갱신된다.
useState를 선택하여 랜더링이 일어나면서 useRef의 변경 값이 적용되었다.
useRef는 object로 저장되며, 값은 current에 저장된다.
3. React에서의 useEffect 사용.
특정 조건에서 발생하는 이벤트를 생성할 때 사용한다.
addEventListener를 편하게 사용할 수 있는 기능이다.
input tag의 ref에 적용하여 사용한다. <input ref={idRef}>
함수 내부에 조건식을 넣거나, input tag 안에 조건식을 넣는 방법으로 서로 다른 ref를 연계할 수 있다.
또는 두개의 useEffect를 사용하여 하나는 조건문 없이 idRef로, 하나는 조건문 있는 idPW로 작성할 수도 있다.
이 경우 조건에 해당될 때는 조건문이 있는 useEffect가 우선 사용된다.
4. React에서 createContext 사용.
컴포넌트간 props로 데이터를 이동할 때 변화가 없는 구간을 불필요하게 거치게 된다.
이것을 데이터를 지정된 곳 이하의 컴포넌트에 모두 적용시켜 필요한 부분만 차용할 수 있게 한다.
context 폴더에 jsx 파일을 하나 생성하고 createContext를 사용하여 선언한다.
데이터를 가지고 있는 파일에는 props에 해당하는 부분이 선언되어 있다.
원하는 항목을 provider를 사용하여 지정해준다. 앞뒤로 감싸주는 것에 주의한다.
데이터를 받으려는 파일에는 useContext를 사용하여 데이터를 가져온다.
리엑트에 본격적으로 들어가면서 랜더링에 좀더 중점을 두는 것 같다.