46일차 TIL 210511 React + Ajax

0. 어제 과제가 너무 어려웠던 탓일까 아님 리액트가 눈에 익은 것일까?

생각보다 과제가 쉽게 끝났다. 🙏

1. 프론트엔드 개발에서의 상태관리

  • 상태(state) 란, 변하는 데이터이다. 특히 ‘동적으로 표현되는 데이터’ 라고 할 수 있다.
  • 쇼핑몰 장바구니 페이지에서 상태 : 장바구니에 추가된 물품, 선택된 탭, 결제 선택 여부, 제품 수량 등
  • SideEffect : 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인 ex ) 네트워크 요청
  • 우선 SideEffect를 최대한 배제하고 컴포넌트를 만들어야 한다. fetch와 같은 API 요청이 없어도 이 컴포넌트는 작동되어야 한다.

2. 상태의 두 가지 구분

  • 로컬 상태 : 특정 컴포넌트 안에서만 관리 되는 상태 ex) 대부분의 입력값을 받는 경우의 form 데이터
  • 전역 상태 : 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 ex) 언어 변경, 다크모드 등
  • 한 곳에서만 상태를 저장하고 접근해야 한다. 출처는 오직 한 곳에 두고 관리하는것이 편하다.
  • 데이터 무결성 : 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 와야 한다. Single source of truth
  • 상태 관리를 위한 각종 툴 : Redux , React Context, Mobx : 전역 상태 저장소 제공, props drilling 문제 해결

3. 비지니스 로직

  • 유튜브에서 동영상을 찾아보기 위한 비지니스 로직
  • 검색창에 검색어를 입력하고 검색 버튼을 누른다 >검색어를 이용해 유튭 API 호출 해 결과 받아오기 > 목록으로 표시되는 결과중 원하는 영상 클릭 > 동영상 시청
  • 유튭 API를 받아오는 Side Effect 는 검색결과가 저장되어있는 컴포넌트에서 다뤄져야 한다.

4. 스프린트 하면서 배운 점

  • 변수명은 짓기 나름이라고 생각했는데, 테스트케이스에서 정해준 변수명을 사용하는게 중요하구나 싶다.
  • 단순히 테스트케이스를 통과하는것 뿐만아니라, 변수명은 ‘모두와의 약속’이니깐.
  • 컴포넌트 안에 사용한 함수를 사용하려면 반드시 .bind(this) 를 해야한다.
  • 지난주에 배운 fetch 낯설다;;; fetch(url).then(res=>res.json()).then(json=>…
  • 동영상 목록을 관리하는 최상위 컴포넌트에서 API를 받아오는 작업도 해야하므로, searchVideo 함수는 props 로 자식 객체에 계속 넘겨줘야 한다.
  • props 로 전달받은 함수랑 내려보낼 함수명은 동일하면 안된다.
const Nav = ( props ) =>(
  <nav className='navbar'>
    <div className='col'>
      <Search handleButtonClick = { props.handleButtonCLick}/>
    </div>
  </nav>
);
  • 전달 받은 이벤트에 매개변수 전달해줄때는 Onclick={()=>this.props.handleButtonClick(this.state.queryString)} 형식으로 전달해준다.
lass Search extends React.Component {
  constructor(props){
    super(props)
    this.state={
      queryString:''
    }
    this.setting = this.setting.bind(this)
  }
  setting(e){
    this.setState({
      queryString:e.target.value
    })
  }
  
  render(){
    return(
  <div className="search-bar form-inline">
    <input className="form-control" type="text" onChange={this.setting}/>
    <button className="btn hidden-sm-down" onClick={()=>this.props.handleButtonClick(this.state.queryString)}> //🔥
      검색
    </button>
  </div>
    )}
}

Updated: