76일차 - day03 & day04

[ day03 ]

Test07

 

 

Test08 - img

사진 클릭 시, 해당 정보 크게 보임

]

 

 

Test09 - src/image

 

 

Test10 - Ref

 

 

Test11 - 전체 선택 & 해제

 

 

 

[ day04 ]

Test01 - useEffect

useEffect란?

• useEffect는 렌더링, 혹은 변수의 값 혹은 오브젝트가 달라지게 되면, 그것을 인지하고 업데이트를 해주는 함수이다.
• useEffect는 콜백 함수를 부르게 되며, 렌더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러 개의 함수들을 동작시킬 수 있다.
• 렌더링 후 useEffect는 무조건 한번은 실행된다.

[형식] 
1. 컴포넌트가 나타날 때 딱 1번만 함수가 호출
useEffect( () => {
}, [ ]);

2. 특정 props가 바뀔 때마다 함수가 호출
useEffect( () => {
}, [ props ]);

 

 

useEffect 라는 Hook을 사용하여 할 수 있는 3가지 동작

1. 컴포넌트가 마운트 됐을 때: 처음 나타났을 때
2. 언 마운트 됐을 때:사라질 때
3. 업데이트될 때: 특정 props가 바뀔 때

[ ]로 설정하면 컴포넌트가 처음 나타날 때만 useEffect에 등록한 함수가 호출 한다.

useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수라고 부른다. 
cleanup 함수는 useEffect 에 대한 뒷정리를 해준다고 이해하면 되는데, 
[ ] 안에 내용이 비어 있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출된다.

 

 

실행하면 콘솔창에 UseEffect는 왜 두번 실행되는걸까?

>> 개발 모드일 때 디버그 모드로 인해서 2번 실행된다.

[해결 방법]
index.js
=> <React.StrictMode> 부분을 주석으로 처리

React의 Strict Mode ?
StrictMode는 리액트에서 제공하는 검사 도구이다.
개발 모드일 때 디버그를 통하여, 이 태그로 감싸져있는 App 컴포넌트와 자손까지 검사하는 것이다.
안전하지 않은 생명 주기를 가진 컴포넌트, 권장되지 않은 부분, 배포 후 문제가 될 수 있는 부분들까지 미리 확인하는 것이다.

creat-react-app으로 앱을 만들었기 때문에 기본적으로 생성되어 랜더링을 두 번이나 했었던 것이다.

 

Test02 - useEffect()

 

 

 

Test03 - module.css

컴포넌트별로 CSS 작성

• css 파일명: {파일명}.module.css
• import 방법: import 참조변수 form './파일명.module.css';
• 사용법: className={ 참조변수.클래스이름 }
• 개발자 도구에서 보면 '파일명클래스명아무말' 이라고 설정됨

 

 

 

Test04 - css

Test03.jsx에서 css을 import 했다.

싱글패턴을 사용하기에 Test03의 자식에게만 해당 css가 적용되는 것이 아니라 모든 컴포넌트에 적용된다. 

마지막 사진을 Test04 컴포넌트에도 적용된 것을 볼 수 있다. 

 

특정 컴포넌트에서만 사용하기 위해서는 module를 사용하여야 한다. 

 

 

 

 

Todos