23Feb2020 TIL

Where to Fetch Data:

DATA를 서버로 부터 언제 불러와서 client 에 display 를 해줄 것인지는 리액트를 통해 직접 과제를 구현하기 전까지 아리쏭 달쏭 했던 것 중 하나다. 결론적으로 completeDidMount()에서 fetch data를 하는 것이 가장 좋다. (참고자료 : 여기)

 

render는 data를 fetch 하는 곳이 절대 아니다. JSX의 요소들이 화면에 그려질 수 있도록 하는 공간이며, 약간의 데이터들이 디스플레이 되기 위한 약간의 조건들이 쓰여질 수 있는 곳이다. 

 

componentWillMount()도 데이터를 불러오기에 적합한 장소는 아니다. 만약 해당 함수(매소드?)에 데이터를 불러올 경우, 자바스크립트의 비동기적 특성으로 인하여 데이터를 미쳐 불러오기도 전에 JSX 요소가 render 되어 각종 에러가 발생할 것이다. map 의 속성을 찾을 수 없다거나, 데이터의 array / object 의 각종 매소드를 활용한 함수들이 undefined state that cause error를 일으킬 것이다. (몸소 경험함^^;;) 

 

componentDidMount()가 실행되기 전,데이터 페치는  초기에 render가 되기 전까지 이루어지지 않을 것이다. 초기 렌더가 일어난 후 데이터를 페치하고 -> 이 데이터를 활용한 각종 기능을 수행하는 순서로 가는 것이 좋다. 

 

---

Async JavaScript?

: 자바스크립트는 때때로 비동기적으로 처리한다. 데이터를 통신하는 http는 시간이 걸리는 작업이다. 만약 싱글 쓰레드인 자바스크립트가 동기적으로만 작동한다면, 서버와 통신할 때 클라이언트는 어떤 작업도 실행할 수 없을 것이다. 

 

비동기를 처리하는 방법

• Callback : the way to handle async
• promise : callback chain
• async / await

 

---

Bundler

: 여러 module 을 한 번에 합쳐서 html 로 전송

의존성 해결 / 각각의 모듈을 전송하는것이 아니라 한 번에 묶어서 전송해 속도가 빨라짐.

 

 

---

경우 1. 하위 컴포넌트의 데이터를 상위 컴포넌트로 끌어 와야 할 경우는?

App.js > VideoList.js > VideoListEntry.js 상위 <- 하위 컴포넌트로 구성되어 있다고 가정한다. VideoListEntry 에서 발생한 이벤트에서 데이터를 변수로 받은 후 -> VideoList를 거쳐 App.js 로 해당 데이터를 옮겨와야 하는 경우는 어떻게 해야할까?

 

//App.js 최상위 파일

class App extends React.Component {
  constructor(props) {
    super(props);
    this.clickVideoList = this.clickVideoList.bind(this);
  }
  
  clickVideoList(video) {
    this.setState({ currentVideo: video });
  }
  
  render() {
    <div>
      <VideoList
         videos={this.state.video}
         clickVideoList={this.clickVideoList}
         clickStandbyButton={this.clickStandbyButton}
      />
    </div>
 }
};

 

실행하고자 하는 이벤트 함수를 정의한다. 이때 video는 최하위 component 인 VideoListEntry로 부터 받아올 것이다. 

 

 

// VideoList.js 파일

const VideoList = ({ videos, clickVideoList}) => {
    const listItem = videos.map(val => (
      <VideoListEntry
        key={val.etag}
        clickVideoList={clickVideoList}
      />
    ));
    return <div className="video-list media">{listItem}</div>;
};

 

App.js 로부터 prop.clickVideoList를 전달 받은 것을 VideoListEntry로 전달해준다. 

 

// VideoListEntry.js 파일

const VideoListEntry = ({ video, clickVideoList}) =>
  return (
    <div className="video-list-entry-frame">
      <div className="video-list-entry">
        <div
          className="media-left media-middle"
          onClick={() => clickVideoList(video)}
        >
      </div>
    </div>
  )
}

 

onclick 이벤트를 통해 video 라는 데이터를 prop으로 받은 clickVideoList에 인수로 전달한다.

 

 

---

경우 1의 다른 해결 방법 : 직접 상위 prop 에 전달하는 방법 (lift State Up 같음)

이번엔 App.js > Nav.js > Search.js 순이다. 

 

 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.searchEvent = this.searchEvent.bind(this)
  }
  
  searchEvent (value) {
  //생략 Nav 의 handle 을 통해서 받아온 value 임
  }
  
  render() {
    console.log(this.state);
    return (
      <div>
        <Nav handle={this.searchEvent} />
      </div>
    )
  }
}

handle이라는 prop변수에 실행하고자 하는 함수를 담아준다. 

 

class Nav extends React.Component {
  constructor(props) {
    super(props);
    this.onSearchSubmit = this.onSearchSubmit.bind(this);
  }

  onSearchSubmit(data) {
    this.props.handle(data);
  }

  render() {
    return (
      <nav className="navbar">
          <Search handle={this.onSearchSubmit} />
      </nav>
    );
  }
}

Search 에서 받아온 handle 의 value를 this.onSearchSubmit 의 파라미터로 전달 -> 그 후 App의 상위 prop. handle 에 data 전달.

 

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.handleEvent = this.handleEvent.bind(this);
    this.myRef = React.createRef();
  }

  handleEvent() {
    const node = this.myRef.current;
    let value = node.value;
    this.props.handle(value);
  }
  
  //중략
}

this.prop.변수(value) 를 통해 직접 상위 개체로 value를 전달

 

결론 : 첫번째 방법이 더 이해하기 쉬운 것 같다. 설명하면서 내 논리에 내가 꼬일 뻔 했다^^ 

 

 

---

localStorage

: 말그대로 내 컴퓨터에 데이터를 저장하는 것이다. 주의할 점은 key와 value 모두 string으로 저장해야한다는 사실! 로컬 스토리지에 저장을 하면, 내가 만든 fake youtube page의 대기 목록들이 새로고침 되어도 사라지지 않는다는 점이다. 드디어 매번 새로고침할 때마다 사라지는 데이터가 아닌, 새로고침해도 남아있는 데이터를 만들 수 있게 되었다! ✨

 

• localStorage.setItem('key', 'value') 를 통해 데이터 저장

// 클래스로 정의하고 리액트 컴포넌트에 연결한 윗부분 생략

  storeLocalstorage(collection) {
    localStorage.setItem("data", JSON.stringify(collection));
  }

// 이하 생략

JSON.stringify() 를 통해서 데이터를 통으로 문자화 하여 data라는 key 에 저장한다.

 

• localStorage.getItem('key') 를 통해 데이터 가져오기

//마찬가지로 생략

  getWaitingDataFromLocalstorage() {
    let data = localStorage.getItem("data");
    data = JSON.parse(data);
    this.setState({ standby: data });
  }
  
//이하 생략

 

JSON.parse()를 통해서 JSON 문자화된 data를 노멀 데이터? (적절한 용어를 모르겠음. 자바스크립트 데이터?)로 바꿔준다. 

 

---

Fake-Youtube

소중한 나의 페이크 유투브 😻

 

2주동안 소중한 페이크 유투브 페이지를 만들었다. 처음 접한 리액트는 왜 굳이 이렇게 써야되나? 그냥 기존에 JavaScript + DOM + CSS + Html 쓰면 되지, 굳이 어렵게 새로운 react 쓰냐고 전세계 코딩러들을 향해 불만을 가졌으나. 한 번 익숙해지니까 정말 신세계다. 왜 사람들이 리액트를 쓰는지 깨달았다. 기존의 방식으로 이걸 구현했다면, 코드 쓰느라 눈빠지고, 기능 하나 안되서 디버깅하느라 포기했을지도 모를 일이다.

 

2주간 결론 : 리액트는 익숙해지면 진짜 신세계다! ⭐️-끝-