TIL.28 React pre_study

h986680·2020년 11월 30일
0

출저



React 란?

  • 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리.
  • View만 담당 : 리액트는 MVC(Model-View-Controller) Architecture (ex. Angular, Vue)와는 다르게 리액트는 오로지 View만 담당한다.
  • third-party 라이브러리(ex. React-router, Redux)를 함께 사용 : 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-router, Redux)를 함께 사용한다.
  • 커뮤니티 활성화 :페이스북의 지속적인 관리와 함께 생태계가 활성화 되어 있으며 다양한 자료와 커뮤니티가 크다.
  • 선언적이고 효율적이며 “컴포넌트”라고 불리는 작은 코드 모음을 이용하여 복잡한 UI를 구성하도록 돕기 때문에 유지 보수가 쉽고 재사용이 가능하다.
  • 라이브러리 : 프레임워크와는 다르게 커스터마이징이 가능하다.


JSX

  • JSX(syntax extension for JavaScript)는 JavaScript 확장버전이다. HTML과 아주 비슷하게 생겼고 javascript 파일 내에서 작성할 수 있다.
  • JSX는 원래의 JavaScript 문법이 아니기 때문에, .js 파일내에 JSX 문법이 있으면 브라우저에서 해석하지 못합니다. 문법 오류가 납니다.


component

  • UI를 재사용 가능하게 개별적인 조각으로 나눈것으로 개념적으로는 JS 함수와 유사하다.
  • 'props'라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
  • 함수 컴포넌트클래스 컴포넌트 가 있다.
// 함수로 Welcome 컴포넌트 구현.
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 클래스로 Welcome 컴포넌트 구현.
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
// class로 컴포넌트를 만들때는 React.Component를 extend해서 생성.
// render()메서드는 무조건 정의.
  • 컴포넌트의 이름은 항상 대문자로 시작해야 하며, 정의한 컴포넌트는 <Welcome /> 와 같이 작성한다.


props

  • 컴포넌트를 정의한 후, 사용할때 원하는 attribute를 추가할 수 있다.
  • 그리고 이것을 컴포넌트를 정의한 함수에서 사용할 수 있는데 이것을 props 라고 말한다.
    • props 는 읽기 전용이다.
    • 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안 됩니다. 라고 리엑트 홈페이지가 말했다...
      아래 주석처럼 정의된 컴포넌트를 가져다 쓰는 부모 컴포넌트에서 수정하여 쓴다.
    • 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.라고도 리엑트 홈페이지는 말한다.
      받아온 인자 (props)를 변경하는 리턴값을 가지면 안된다.
// 1. Welcome 컴포넌트 정의
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 2. App 컴포넌트 정의
function App() {
  return (
    <div>
      <Welcome name="Sara" /> 
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
      //정의한 컴포넌트를 사용할때 name 이라는 attribute를 추가하여 사용.
      //그러면, 위의 Welcome 컴포넌트에서 attribute를 parameter로 
      //받아서 사용할 수 있다.
      //위와 같이 컴포넌트를 사용한 측을 부모라고 한다.
    </div>
  );
}

// 3. 화면에 React 요소 그려주기
ReactDOM.render(
  <App />,
  document.getElementById('root')
);


state

  • 컴포넌트의 상태 값.
  • 컴포넌트 내에서의 수정을 해서는 안되는 props 와는 다르게 state는 컴포넌트 내에서 정의하고 사용한다.
  • 클래스에서 constructor()에는 super()를 작성해주고, 초기화할 값들을 세팅해준다.
class Button extends React.Component {

  constructor() {
    super();

    this.state = {
      clicked: false
    }
  }
  //clicked: false 라는 상태값으로 초기값을 설정해준다.

  render() {
    return (
      <div
        className="btn"
        onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
      >
        {this.state.clicked ? '좋아요' : '싫어요'}
//화면에 보여지는 부분. 클릭상태가 참이면 '좋아요'를, 거짓이면 '싫어요'를 화면에 보여준다.
      </div>
    );
  }
}
//
ReactDOM.render(
  <Button />,
  document.getElementById('root')
);


Lifecycle of component

생성

  1. 컴포넌트 호출(mounting).
  2. constructor(초기화) : 아직 화면에 아무것도 없음.
  3. render : 화면에 그려짐(보임). 컴포넌트를 DOM에 부착하는 역할을 한다.
  4. componentDidMount : 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출.

업데이트

상태 업데이트.

  • 새로운 props.
  • setState 로 state 변경.
  1. render : 화면에 그려짐(보임). 컴포넌트를 DOM에 부착하는 역할을 한다.
  2. componentDidUpdate : 갱신이 일어난 직후에 호출된다.

제거

상태 제거.

  • 컴포넌트 더이상 필요 없을시.
  1. componentWillUnmount : 컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다.


0개의 댓글