카카오 클라우드 스쿨 12월 7일

최재유·2022년 12월 7일

Props

상위 컴포넌트가 하위 컴포넌트에 데이터를 전달
클래스형 컴포넌트에서는 this.props.이름 으로 사용하고 함수형 컴포넌트에서는 함수의 매개변수로 받아서 사용
수정이 안됨

useState

state는 컴포넌트 안에서 생성해서 사용하는 데이터

클래스형 컴포넌트에서는 this.state.이름 으로 생성하고 this.setState(이름:수정할 값) 으로 수정

함수형 컴포넌트에서는 const[이름, setter이름] = useState(초기값)으로 생성해서 이름으로 사용하고 setter 이름으로 수정합니다.
객체나 배열은 직접 수정이 안되서 새로운 내용으로 만들어서 대입하는 형태로 수정합니다.

+stat는 수정을 하게되면 Component를 리랜더링(변경된 부분만 다시 출력)합니다.

useEffect

컴포넌트의 수명주기와 관련된 함수

클래스형 컴포넌트는 각 수명 주기 메서드를 사용하는데 함수형 컴포넌트는 useEffect 함수를 이용해서 Mount 될 때 업데이트 될 때 Unmount될 때를 처리

첫번째 매개변수는 수행할 내용을 가진 함수이고 이 함수가 함수를 리턴하면 Unmount될 때 호출되는 함수가 되며 두번째 매개변수는 []이면 모든 state가 변경될 때 와 mount 될 때 호출되고 []안에 state를 설정하면 mount될 때 와 그 state가 변경될 때 만 함수를 호출합니다.

useRef

로컬 변수를 만들거나 로컬 변수를 DOM 객체에게 할당하고자 할 때 사용합니다.

Component와는 아무런 관련이 없음

useMemo

함수 호출의 효율성을 위해서 사용하는데 함수룰 호출하는 부분을 useMemo로 감싸고 두번째 매개변수로 데이터를 설정하면 데이터가 변경된 경우는 함수를 호출하지만 데이터가 변경되지 않은 경우는 함수를 호출하지 않고 함수의 결과를 재사용합니다.

useCallback

1)개요

특정함수를 새로만들지 않고 재사용하고 할때 사용

컴포넌트에 구현한 함수들은 컴포넌트가 랜더링 될때마다 다시 생성
+컴포넌트가 많아지고 랜더링이 자주 발생하면 함수들을 다시 만드는 것은 비효율적이 될수 있습니다.

useCallback을 이용하면 데이터가 변경된 경우에만 함수를 다시 만들도록 할수 있습니다.

첫번째 매개변수는 함수이고 두번째 매개변수는 데이터의 배열입니다.

React.memo

1) 개요

컴포넌트의 props가 변경되지 않았다면 리랜더링을 방지해서 리랜더링의 성능 최적화를 해줄수 있는 함수

이 함수를 이용해서 컴포넌트를 감싸주기만 하면 리랜더링이 필요한 상황에서만 리랜더링을 합니다.

React styling (스타일적용)

styling 방식

일반 CSS 사용

Sass: CSS 전처리기(pre_processor)를 이용하는 방식으로 확장된 CSS문법 사용

CSS Module: 스타일을 작성할 때 CSS클래스 이름이 다른 CSS클스 이름과 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션

styled-components:컴포넌트 안에 스타일을 내장시키는 방식으로 동일한 스타일이 적용된 컴포넌트를 사용하는 방식 - 실제 애플리케이션 제작 작업을 할 때 이런 방식으로 만들어진 컴포넌트들을 많이 이용