0604 TIL React

create-react-app

• npm i -g create-react-app 으로 설치하면 귀찮게 쓸 때마다 설치할 필요 없이 사용할 수 있지만 전역에 라이브러리를 설치해서 용량문제와 업데이트 시 전역으로 업뎃해야하는 상황이 될 수 있음.
• npx create-react-app으로 설치하면 프로젝트 만들 때마다 설치해야 하는 귀찮음이 있지만 최신버전을 유지할 수 있는 장점이 있다.

Component

component 주의사항

컴포넌트 만들 땐 항상 대문자로 시작.
class component생성시엔 반드시 render()함수를 써야함.
컴포넌트 내부의 태그는 하나의 최상위 태그여야 한다.

component props 사용하기

• 함수 컴포넌트의 경우 => 객체인자를 받아서 사용

const Content = (props) => { // === function Content(props) {...}
  return(
    <div>
      <h1>{props.title}</h1>
    </div>
    );
}

• 클래스 컴포넌트의 경우 => this.props.value로 작성

class Content extends Component {
  render(){
    return(
      <div>
        <h1>{this.props.title}</h1>
      </div>
    );
  }
}

component 쪼개기

components폴더를 생성해 파일을 관리하는 것이 효율적이다.
Nodejs로 import export하는거랑 거의 같다. 컴포넌트별로 파일을 만들어서 App.js로 전부 불러오는 방식.

State

사용자는 알 필요 없는 내부적으로 작용하는 것을 State. 외부의 Props에 따라 내부의 State가 분리되어 있어야 한다. 내부적으로 사용할 상태는 state로 사용.
사용하는사람 <-> 구현하는사람

state 사용하기

constructor()을 사용해서 state 값을 초기화 시켜준 후 컴포넌트의 값을 세팅한다.
더욱더 캡슐화 가능

• this.state = {...}형태로 초기화 시킬 값을 설정.
• render할 컴포넌트는 props={ this.state.값을 적으면 됨 }

constructor(props){
  super(props);
  this.state = {
    title:"HELLO",
    sub:"World"
  }
}
render(){
  return(
    <Content 
      title={this.state.title} 
      sub={this.state.sub} />
   );
}

✅ render()이 실행되기 전에 필요한 값을 constructor()에 셋팅함으로 써 실행순서?를 설정하는 것으로 이해했다!!!