Frontend 세미나 3주차] React 기초

git remote add origin 주소 : 해당 주소에 깃 연결

git init > git add . > git commit -m "~~" > git push origin master

 

src 폴더에서 index.js, app.js 빼고 전부 삭제

React의 역할

index.html "root" div안에 생성한 element(ex, App.js)를 넣는 역할

id = "root" 가 있는 것이 실제로 보여지는 화면

React의 특징

• Virtual DOM
  • 웹 페이지를 이루는 태크들을 자바 스크립트가 이용할  수 있게끔 브라우저가 트리 구조로 만든 객체 모델
  • DOM 변경될 때마다 웹브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고, 렌더링이 일어나는 과정에서 많은 시간이 허비된다. => 새로운 element가 업데이트 된 경우 새로운 가상 DOM 생성 후 이전 DOM과 비교해서 차이점 DOM만 업데이트 한다.
• JSX
  • js에서 html을 작성할 수 있ㄷ록 만들어진 js의 확장 문법
  • 브라우저에서 실행하기 전에 바벨을 사용해 일반 js 형태의 코드로 변환한다.
  • return 안에 넣을 때는 하나의 컴포넌트만 리턴할 수 있다.
  • 코드를 {}로 감싸 js 표현식 사용한다. (삼항연산자도 {}안에 사용 가능, if문은 x)
  • inline styling 가능 -> camelExpression 사용
  • class 속성을 설정할 때 className으로 표시
• Component
  • html을 반환하는 함수
  • react로 만들어진 애플리케이션을 이루는 최소한의 단위
  • 다른 파일에서 사용할 수 있게 하려면 export default 꼭 작성하기
  • 사용하는 컴포넌트 : 부모 컴포넌트 / 사용되는 컴포넌트 : 자식 컴포넌트
  • 부모가 자식에게 props 전달 (정방향 데이터 흐름)
  • api로 데이터를 받아 화면에 표시해야 할 때 : 데이터를 미리 가지고 있는 것이 x, 따라서 컴포넌트를 미리 복사해서 가지고 있을 수 없다. => 배열을 하나 생성한 후 이곳에 동적 데이터를 넣어 map 함수를 이용해 data rendering하기 (데이터 사용) ---> 각 데이터의 key prop 있어야 한다.
• Prop-types
  • 자식에게 제대로 된 prop을 주는지 확인하기 위해 -> 잘못된 prop을 전달할 경우 오류 메시지를 준다.
    -> 터미널에 npm i prop-types를 쳐서 설치한 후 import PropTypes from 'prop-types';  하면 사용할 수 있다.
  • Ex) Movie.propTypes = { title : PropTypes.string.isRequired, year : PropTypes.number.isRequired, }
    -> 잘못된 형식을 받는다면 에러 메시지 출력

함수형 vs 클래스형 컴포넌트

클래스형 컴포넌트 :

- import { Component } from 'react'; 필요
class Movie extends Component {

     render() {

       return ();

     }

}

- 함수형처럼 전달받은 prop의 이름을 직접 쓰는 것이 아닌 this.props.를 통해 부모 컴포넌트로부터 받아와야 한다. -> 이게 불편하다면 미리 선언하는 것 가능 ( const {title, year} = this.props;  => {title} 이렇게 바로 사용 가능)

왜 클래스형 컴포넌트를 사용하는 가?

-> 클래스형에서만 state, lifecycle 함수 쓸 수 있기 때문에 => Stateful (함수형 : Stateless)

• this.state = { count : 0 } => render함수 안에서 쓸 때
• state = { count : 0 } => render함수 밖에서 쓸 때

직접적으로 state를 변경하지 마라 -> setState 함수를 이용해서 변경해야 state 값이 변경될 때마다 render 함수를 다시 호출해서 바뀐 값을 화면에 그려줘야 하는데 직접 state 값을 변경하면 render 함수가 호출되지 않기 때문

 

this.setState({count : this. state.count +1}) 보다

this.setState({current => ({count : current.count +1})) 이 더 성능상으로 좋은 코드이다.

 

return 문 안에 있는 Count {this.state.count} -> render 함수 안에 const {count} = this.state  선언해서 Count {count}로 사용 가능

Component Life Cycle

• Mounting
  • 컴포넌트의 인스턴스가 생성돼 DOM 상에 삽입되는 단계로 Lifecycle이 종료될 때까지 한 번만 일어난다.
  • Constructor : 컴포넌트 클래스의 생성자 함수로 컴포넌트를 만들 때 처음으로 호출되는 함수로 state의 초기값을 지정한다.
  • Render : 화면에 표현될 JSX를 반환 후 화면에 그린다.
  • ComponentDidMount : 컴포넌트가 화면에 모두 그려진 이후 호출된다. !! 렌더링이 이루어진 직후에 호출된다.
• Updating
  • props 또는 state가 변경되어 컴포넌트가 업데이트 되는 단계
  • Render : 데이터가 변경되면 자동으로 호출, 화면을 다시 그린다.
  • ComponentDidUpdate : 화면이 다시 그려진 이후 호출된다.
• Unmounting
  • 컴포넌트가 DOM 상에서 제거되는 단계로 componentWillIUnmount 는 컴포넌트가 화면에서 제거되기 전에 호출된다.

예시

class App extends Component {
 state = {
  isLoading : true,
  movies : [] // 데이터를 받아와서 저장할 배열을 선언하고
 }
 componentDidMount() {
   setTimeout(() => { // api 호출을 아직 다루지 않았기 때문에 이 함수 사용
    this.setState({isLoading : false});
    }, 6000); // 6초 뒤에 실행
 }
 render() {
  const {isLoading} = this.state;
  return (
   <div>
    {isLoading ? "Loading" : "We are ready"}
   </div>
  );
 }
 }

클래스형 컴포넌트의 단점

- 함수형이 선언 더 간편, 메모리 덜 사용

-> Hooks 도입
-> 함수형 버전으로 UseState, UseEffect란 hook을 사용해 state와 lifecycle 함수를 사용한다.

 

이전 코드의 경우 클래스형 컴포넌트가 많지만 현재는 함수형을 쓰는 것을 추천한다.