TIL.28 React pre_study

Haiin·2020년 11월 30일

React TIL

출저

React공식홈페이지

위코드 강의자료

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

생성

컴포넌트 호출(mounting).

constructor(초기화) : 아직 화면에 아무것도 없음.

render : 화면에 그려짐(보임). 컴포넌트를 DOM에 부착하는 역할을 한다.

componentDidMount : 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출.