react.js & node.js 6일차

Review

그냥 변수 => jsx에서 보이지 않고 값이 안바뀌는 경우(상수)

useState 를 쓰는 이유 => jsx에서 써야하고 값이 계속 변하는 변수인경우(변수) - 변하면 랜더링됨

useRef를 쓰는 이유 => jsx 보이지 않아도 되지만 값이 바뀌는 경우(static) - 변해도 랜더링 안됨

 

이때 useState로 할당된 함수와 변수는 비동기이다. 그래서 한 동작에 여러번 실행시키어도 한번만 적용된다. 위에서의 함수도 비슷하게 비동기라서 묶여서 한번에 실행된다. 그렇다보니 한번클릭에 값이 1만 증가된다.

 

그래서 이걸 연속으로 하기 위해서는 callBack 함수를 사용하는 방법이 있다. 위와같이 실행하면 prev인자로 이전값이 들어오기 때문에 업데이트가 되는 것이다.

하지만 위와같이 하면 결국에는 number2에 0이 들어와서 최종값은 1씩 증가한다. 또 다시 number2를 이용한 setNumber2 함수의 위치별로 증가되는 값이 달라진다.

 

사실 나는 이게 잘 이해가 아직 안간다.

 

이 이유는 사실 callBack함수가 현재값에 어떤 변화를 준다는 의미를 주는 것이기 때문에 변화가 생기는 것이다.

 

암튼 set함수가 실행되면 rendering된다. 그러면서 useState 변수는 살아있고  JSX도 새로 만들어지지만 실제 html 에서 rendering될때는 virtualDOM이 이전 DOM tree와의 차이를 감지해서 그 부분만 한번에 고치게 된다.

 

이와관련해서 브라우저 랜더링 과정글을 꼭 읽어보자 - FE 단골 면접 질문이다. 이걸 알아야 리액트가 효율적인 이유를 알 수 있다.

브라우저의 렌더링 과정. 렌더링이란 HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가… | by Seungwon Go | 개발자의품격 | Medium

브라우저의 렌더링 과정

브라우저는 어떻게 동작하는가? (naver.com)

 

useEffect를 쓰는 이유 => 컴포넌트 생기고 죽을때, 변수가 변화하고 죽을때 실행될 내용 정의

useReducer를 쓰는 이유 => 옛날에 쓰던거라 지금은 잘 안쓸거 같지만 암튼 switch문임, useState의 상위호완이지만 쓰는게 쉽지는 않음

useMemo를 쓰는 이유 => 외부 함수, API가 실행될 타이밍 설정, 효율성을 위한 훅

useCallback을 쓰는 이유 => 내부 함수(IIFE)가 선언될 타이밍 설정

 

커스텀훅

자주쓰는 기능을 따로 빼서 사용하는 것이 커스텀 훅이다. 만들때 use로 시작해야 훅인것을 알 수 있다.

 

REACT CSS 

리액트는 하나의 index.html에 App.css가 적용되고 있으니 이름짓기에 신경을 많이써야하다. 이를 해결하고자 나온것이 SASS, SCSS 모듈이다.

 

먼저 sass를 설치하자

```

npm i node-sass

```

 

이렇게 만들어진 sass는 webpack이 자동으로 css 파일로 바꾸어준다.

 

이제 앞으로 우리가 css가 하나의 파일에만 적용되기를 원한다면 파일명과 확장자 사이에 module키워드를 넣어주자.

먼저 위와같이 선언하고

위와같이 받아와서 적용하자

 

 

styled-components

```

npm i styled-components

```

 

일단 vscode에서 이거 다운받아라

 

```

import React from "react";

import styled, { css } from "styled-components";

const Box = styled.div`

  background: ${(props) => props.color || "blue"};

  padding: 1rem;

  display: flex;

`;

const Button = styled.button`

  background: white;

  color: black;

  border-radius: 4px;

  padding: 0, 5rem;

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  font-size: 1rem;

  font-weight: 600;

  &:hover {

    background: rgba(255, 255, 255, 0.9);

  }

  ${(props) =>

    props.inverted &&

    css`

      background: none;

      border: 2px solid white;

      color: white;

      &:hover {

        background: white;

        color: black;

      }

    `}

  &+button {

    margin-left: 1rem;

  }

`;

const StyledComponent = () => {

  return (

    <Box color="black">

      <Button>안녕하세요</Button>

      <Button inverted={true}>테두리만</Button>

    </Box>

  );

};

export default StyledComponent;

```

 

위와같이 코드를 짜자

내부에서는 scss처럼 작동한다. 

 

그리고 <Box color="black"> 처럼 props를 전달할 수 있다.

 

또 내부에는 조건 연산자가 적혀있어서 성분을 넘기지 않으면 blue색상이 된다.

 

또 위와같이 inverted가 true일때 특정 속성을 2개 이상 줄때 위와같이 작성해야한다.

 

인자를 전달할때 문자열이 아니면 모두 객체형태로 전달해야한다. 또 비구조화할당도 가능할 것이다.

 

 

또 위와같이 styled 안에 기본 styled 컴포넌트를 넣음으로 상속받아 올 수도 있다.

 

 

반응형 웹페이지

위와같이 반응형을 만들기 위해서는 몇가지 스킬들이 사용된다.

1. 중앙정렬시 margin: 0 auto; 하기

2. 위와같이 max-width 1024px까지는 768px을 유지해달라고 했으나 실재로는 768px이 아니다. 왜냐하면 padding 1rem이 있어서 800px 정도 된다. 이건 우리가 사용하는 것들이 content-box이기 때문이다. content-box는 padding, margin을 모두 포함한 크기이기 때문에 box-sizing: border-box;를 추가해야한다.

그래서 기본적으로 프로젝트 시작시 모든 성분에 box-sizing을 border-box로 주고 시작한다.

이와 유사한것들 몇가지도 더 적어봐야겠다.

 

 

 

물론 이것을 초기화하기위해 reset-css cdn이 따로 존재한다.

reset-css CDN by jsDelivr - A CDN for npm and GitHub

jsDelivr - A free, fast, and reliable CDN for Open Source

 

 

@media (조건) {

변화될 조건
}

 

 

css flex

이번에야말로 CSS Flex를 익혀보자 – 1분코딩 (studiomeal.com)

이번에야말로 CSS Flex를 익혀보자

display:flex는 자식요소의 위치를 지정하는 용도이다.

display:flex를 주면 위와같이 item들이 한줄로 놓여진다. 물론 이걸 그냥 가로로 놓는 용도는 아니다. 그 외에도 다양한 속성들이 있다. 대충 위쪽 글을 읽어보자

 

justify-content는 축을따라서 이동

align-items는 수직축 방향 정렬