TIL-React(Dynamic Routing), AWS

sanghun Lee·2020년 8월 30일

Today I Learned

목록 보기

54/66

Dynamic Routing

간략한 정의

<Route exact path="/monsters/:id" component={MonsterDetail} />

:id는 객체에 키값을 주듯이 :hello :what등 뭐든 키값을 정해주면 된다고 합니다.

쉽게 생각하면 HOC(High ordered component)의 역할 비스무리한데

react로 웹을 만들다 보면 전달이 필요한 인자들이 무수한데 그것을 서로 연결이 되어있지 않는 컴포넌트에 보내야 할일이 생깁니다.

이때 선택지가 크게 Redux, HOC, Dynamic Routing 이 세가지중 하나인 것 같은데.

그중에서도 저는 아직 제대로 배운게 동적 라우팅 뿐이니 그걸 활용해서 코드를 짰었습니다.

간단한 예제

아래는 제가 제품 list페이지에서 상세페이지로 넘어갈 때 사용한 모습입니다.

해당 코드는 list페이지에서 detail로 넘어갈때의 코드입니다.

  moveOnto = () => {
    this.props.history.push(
      `/list/category=lip&${this.state.selectedColor
        .map((el) => `color=${el}`)
        .join("&")}`
    );
  };

길지 않기에 간단히 설명하자면 첫번째 사진의 detail/:id에서 :id 부분과 아래의 코드부분이

lip&${this.state.selectedColor
        .map((el) => `color=${el}`)
        .join("&")}`

동일하다고 보면 마음이 편한데 전후관계가 명확합니다.
:id는 해당 코드블럭을 넘겨주는 전달자 역할이라고 생각하면 됩니다.

결론을 말하자면 동적라우팅을 통해 연결되어 있지 않은 컴포넌트 사이의 관계에서 특정변수값을 통하여 원하는 값을 주소 뒤에 넣어주고 연결이 가능한 것입니다.

ComponentDidUpdate

동적라우팅을 이용해 특정값을 받아 왔으면 해당 페이지가 re-render되어 원하는 모습을 보여줘야 하는데 새로운 업데이트가 없다면 그것이 불가능합니다.

그래서 componentDidupdate라는 life-cycle method를 이용하여 이를 해결할 수 있습니다.

해당 메서드는 매번의 렌더 이후 실행이 되며 곧바로 setState를 시켜버리면 무한 렌더의 늪에 빠지기 때문에 특정조건을 넣어 이를 방지할 수 있습니다:)

아래의 코드를 보면 이해가 쉽습니다.

  componentDidUpdate(prevProps) {
    if (prevProps.match.params.hello !== this.props.match.params.hello)
      fetch(`/products?${this.props.match.params.hello}`)
        .then((res) => res.json())
        .then((res) =>
          this.setState({
            newColors: res.products,
          })
        );
  }
prevProps라는 이전에 셋팅된 Props를 인자로 받아와 그것의 특정 값과 현재의 설정된 props값의 변화가 있을시 다시한번 해당 주소를 호출하여 필요 정보를 받고 해당 부분을 setState하여 re-render시켜버립니다.

이처럼 특정 props를 받아와 state에 저장할 때 처음 실수하였던 것이
state에 저장된 값이 자동으로 update되는 줄 알았던 것입니다.

하지만 특정 생명주기 method를 이용하여 이를 특수하게 바꿔줘야하는 것임을 알게 되었습니다.

➕ state는 어떻게 처리하면 될까

fetch를 하다보면 state가 업데이트 되어있는데 그 자체가 업데이트 되지 않는 현상이 발생한다.
무언가 cdu를 이용해야할 것 같은데 아직 코드가 정해지지 않았다 :)...
이놈의 무한렌더를 그만 만나고싶다

AWS

Amazon Web services 의 줄임말로 클라우드 컴퓨팅 플랫폼입니다.
가상머신(서버라 생각하면 편하다)과 스토리지, 네트워크 인프라 등 다양한 서비스를 제공하며 Fourtune Top 500 회사들의 80% 이상의 사용 등 큰 규모를 가지고 있습니다.

처음으로 배포라는 것을 AWS 의 EC2를 통해서 해보았습니다.

자주사용되는 여러가지 툴들은 아래와 같습니다.

<EC2(Elastic Compute Cloud)- 몇분안에 구동 가능한 가상 서버

VPC(Virtual Private Cloud) AWS네트워크 망안의 사용자 전용의 사설 네트워크 망

<S3(Simple Storage Service)-파일 업로드 및 공유.

<RDS(Relational Database Service)- 클라우드에서 데이터베이스 관리.

ELB(Elastic Load Balancing) - 서버로 들어오는 트래픽을 골고루 여러개의 머신으로 전달.

아래는 제가 등록한 인스턴스이며 힌스 클로닝 프로젝트의 배포 서버로 사용하고 있습니다.