react ( Udemy강의 ) - 1. Component, CSS

VScode 자동정렬

           1. prettier 설치

           2. settings - editor:default Formatter - prettier-vscode 설정

           3. keyboard shrotcuts - format document - shift+alt+f

---

react에서 줄바꿈하는 방법!

: https://facerain.club/react-newline/

 

* 리엑트에서 \n 적용하기 위해서는 css에 white-space : pre-line; 추가 할 것!

  ( \n 와 ``에서의 줄바꿈 둘 다 적용! )

---

1. 비 저장 컴포넌트

( 상태 비저장 컴포넌트, 프레젠테이션 컴포넌트, dumb 컴포넌트 )

      내부 상태가 아예 없고 데이터를 출력하기 위해서만 거기 존재하기 때문

 

2. 저장 컴포넌트 

( 상태 저장 컴포넌트, smart 컴포넌트 )

 

* 비저장 컴포넌트를 더 많이 사용 - 애플리케이션을 작게 재사용할 수 있는 조각으로 나누기 때문

 

* 컴포넌트 key : React가 모든 아이템을 개별로 식별할 수 있게 함. 배열의 길이만 신경쓰는게 아니라, 아이템의 위치까지 염두에 둔다.

* 컴포넌트 key 지정 시 map의 index속성은 권장 x -> 버그를 일으킬 수 있음

 

---

react에서의 CSS 사용법

EX_01

<input
          style={{
            borderColor: !isValid ? "red" : "black",
            background: !isValid ? "salmon" : "transparent",
          }}
          type="text"
          onChange={goalInputChangeHandler}
        />

EX_02

<div className={`form-control ${!isValid ? 'invalid' : ''}`}>

---

Styled components

     - 서드 파티 라이브러리

     - 고유하게 범위가 지정된 스타일

     - className 실수 방지

const Button = styled.button`
	// css 내용
	// props 이용가능
	${props => props.invalid ? 'red' : '#ccc'}

`;

<Button invalid={!isVaild}></Button>

: 태그가 지정된 템플릿 리터럴 / 괄호로 호출하는 매서드가 아닌 백틱을 뒤에 붙임 /

 

* 해당 파일의 다른 컴포넌트에서만 사용되는 컴포넌트가 있는 경우

                            - 같은 파일에 두 개의 컴포넌트 모두 가지는 것도 괜찮

---

CSS Modules

: css파일에 설정한 css스타일이 이 파일을 가져오는 컴포넌트로 범위가 지정되도록 하는 것

     - 브라우저에서 코드를 실행하기 전에 코드변환 필요

     - css파일명 수정 ex ) Button.module.css

                          : 기본 컴파일 프로세스에게 코드를 변환하라고 보내는 신호

     - 기본적으로 "컴포넌트 이름_클래스 이름_고유해시" 적용 -> 고유 이름을 가짐

     - 고유한 클래스, 고유한 버전을 만듬

<button className={style.button}></button>

     - 범위지정과 css코드와 자바스크립트 코드를 구별한다는 점이 좋음

 

<div className={classes['main-image']}></div>

: 중간에 -가 들어가는 CSS클래스이므로 점표기법을 못쓰고 []로 묶어줌

---

React 디버깅

- react devtools

---

* Lifting State Up : 상위 컴포넌트로 state를 옮기기, State 끌어올리기

---