리액트 처음 시작하는 나의 시행착오 노트

환경설정 때 했던 시행착오

1. git에 올리는 파일

public

  index.html

  manifest.json

  robots.txt

resources

  fonts

  functions

  images

  styles

  temp

src

  App.js

  index.js

.gitignore

package.json

package-lock.json

yarn.lock

 

git clone후 npm install하면 package.json에 있는 모듈이 설치된다.

npm start하면 git에서 받은 리액트 시작된다.

 

나는 초보라 create react app으로 시작했는데 그렇게 하면 쓸데없는 모듈도 많이 추가되어

프로젝트가 커질수록 비효율적이라고 한다.

npm init하고 webpack,  babel config 설정하고 쓰는 거라고 했는데 이건 나중에 해보면서 정리해보겠다.

 

2. 웹서버 서브경로 설정

package.jso에 "homepage"필드를 추가한다.

"homepage": "/task"

 

3. index.html에서 스크립트를 넣지말고 npm install을 사용해라

  <script src="path/jquery-3.3.1.min.js"></script>

이런식으로 스크립트를 많이 넣는다.

리액트에서는 웹팩 빌드를 위해 npm install jquery로 설치하는게 더 좋다.

 

내가 개발한 소스를 npm run build하고 웹서버에 파일올리는데

빌드할때 빌드하는 순서가 안맞아서 빌드가 제대로 안된다던가 잘 모르는 이상한 문제가 많이 생긴다.

 

4. npm install만하지말고 --save 옵션을 주어라

npm install --save를 해야 package.json에 파일이 들어간다.

 

개발할 때 했던 시행착오

1. constructor에서 이벤트 바인딩 함수 넘겨주는 경우 bind해야한다.

constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
}

2. 부모 컴포넌트의 function에 setState를 넣고 자식에게 넘겨주면

   자식 컴포넌트에서 부모렌더링을 제어할 수 있다.

constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
}
onClick(childData){
    this.setState({data: childData});
}
render() {
  return (
  	<ChildComponent onClick={this.onClick}/>
  )
}

3. 고차 컴포넌트 사용법

- 고차컴포넌트 필요성과 구현방법은 많이 나와있지만 사용법은 잘 안나와있어서 처음 구현하느라 힘들었다.

/* 공통 팝업 고차 컴포넌트 */
function PopupWrapper(WrapperComponent) {
  return class Popup extends Component {
    constructor(props) {
      super(props);
    }
    render() {
      <Popup/>
    }
  }
}

/* 게시판에서 멤버리스트 출력 팝업을 사용 */
class Board extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const MemberPopup = PopupWrapper(Members);
    const MemberModal = <MemberPopup data={this.state.data}/>;
    
    return (
      <>
        {/*React Return은 태그로 감싸져 있어야 한다.*/}
        {MemberModal} // render 함수내에서 인스턴스 화도 가능하고
        <MemberPopup data={this.state.data} /> // return 내에서 인스턴스화도 가능하다.
        {/*
          <PopupWrapper(Members) />  X - 불가능
          {PopupWrapper(Members)} X - 불가능
        */}
      </>
    )
  }
}

4. 자식 컴포넌트 렌더링

- 부모 컴포넌트에서 setState하면 부모 컴포넌트의 render함수가 호출된다.

- 자식 컴포넌트는 shouldComponentUpdate의 boolean결과에 따라 render 함수 호출 유무를 결정한다.

- 즉, 부모컴포넌트에서 setState를 호출하고 props를 자식에 넘겨준다고해서 항상 자식이 다시 렌더링되는것이 아니다.

 

5. 라우터는 컴포넌트를 태그를 이용하지 않고 태그를 작성하면 매번 컴포넌트를 새로 생성한다.

 

<HashRouter>
  <Switch>
    <Route
      path="/myChannel/list"
      component={() => (
        <>
          <HeaderAside>
            <HeaderUser UserName="김지혜" />
            <FillIconButton
              ButtonTitle="채널 등록"
              onClick={this.pageRegist}
            />
          </HeaderAside>
          <MyChannelMain />
        </>
      )}
    />