국비 36일차

JAY·2022년 11월 14일

국비 공부

목록 보기

36/86

react

웹에서 쓰는 건 소스
소스가 항상 필요함 그래서 계속 같이 있어야함 => 프로젝트
그러므로 소스가 웹에 영향을 줄 수 있다

리액트에서 쓰는 건 리소스
리액트는 build 후 package로 만드므로 그 소스가 상시 필요한 건 아님 => 패키지
이 pacakge를 위해 compile된 독립된 과거의 소스(src폴더 내부의 파일)들,
그래서 build 후 이 리소스가 package에 영향을 줄 수 없다

React.StrictMode

두 번 렌더링을 치는 에러가 발생하여
보통은 일단 StrictMode를 넣고 하다가 build 시에 뺀다고 합니닷

uninstall

쓰지 않는 dependencies는 npm uninstall -g *** 해서 package 무게를 줄인다

사용성 개선

사용자들이 적극적으로 참여할 수 있는 페이지를 만드는 것!!
그들이 견뎌야 하는 페이지가 아닌 소통하는 것이 중요

public, src

scss는 public에서 읽을 수 없으므로 src폴더에 위치해있어야 한다

useState

react hook 이라고 함
데이터와 연동해서 움직임
핵심은 useState와 useEffect
데이터베이스를 끌고와서 내가 가공하여 쓸 수 있게 됨

useState는 array..!

<script>

const [ 변수, 변수변경메서드 ] = useState(초기값);

</script>

변수 변경시켜주는 메서드는 그 자체가 대입식이므로 그 안에 ++ 같은 대입식은 넣을 수 없다

<script>

const [ viewType, viewTypeUpdate ] = useState(0);
viewTypeUpdate(viewType + 1); // 가능
viewTypeUpdate(viewType++); // 불가능


viewTypeUpdate(viewType => viewType + 1);

</script>

화살표 함수 사용 시에는 대입이 아닌 return으로 해석하여 문제 없음
그치만 증감 연산자는 여전히! 불가능! 대입식이니까...

function은 무거우므로 계속 써야하는 것들은 웬만하면 function으로 쓰고
그렇지 않으면 화살표 함수(배출, return의 기능)를 사용하는 것이 좋다

array와 object는
ex. const copy = viewType 하게 되면
viewType가 array를 저장해놓은 위치만 불러오기 때문에
이러면 원본이 사라지는 것이다

<script>

const [ viewType, viewTypeUpdate ] = useState(['회사소개', '제품소개']);

// viewType = ['회사소개', '제품소개'];

viewTypeUpdate(['배고프다','밥먹고싶다']);

</script>

근데 이것도 원본이 사라진다..
이렇게 할 경우에는 viewType의 값이 아닌 array 위치만 받은 것이므로 원본 훼손.

<script>

const [ viewType, viewTypeUpdate ] = useState(['회사소개', '제품소개']);

// viewType = ['회사소개', '제품소개'];

const copy = viewType;
copy[0] = '배고프다';
viewTypeUpdate(copy);

// viewType = ['배고프다', '제품소개'];

</script>

const copy = [...viewType]; 로 쓰는 경우 viewType의 값까지 복사할 수 있다
겉에 봉지(ex. [ ], { })를 벗겨주는 것이므로 그 값을 그대로 가져올 수 있다

그리고 내용(스펠링)은 동일한 새로운 array가 태어난다
저장된 위치가 달라지므로 새로운 array인 것이다

<script>

const [ viewType, viewTypeUpdate ] = useState(['회사소개', '제품소개']);

// viewType = ['회사소개', '제품소개'];

const copy = [...viewType];


console.log(copy); // ['회사소개', '제품소개'] 가 된다!!


const [ viewType, viewTypeUpdate ] = useState(['회사소개', '제품소개']);

const copy = [...viewType];
copy[0] = '배고프다'

// console.log(copy); => ['배고프다', '제품소개']

viewTypeUpdate(copy);

</script>