[React] 기본 개념

https://reactjs.org/를 보며 개인적인 공부를 위해 정리한 내용들입니다

Hello World

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

아래와 같이 hello world를 출력할 수 있습니다.

ReactDOM.render(
	<h1>Hello, world!</h1>
    document.getElementById('root')
);

 

JSX 란?

const element = <h1>Hello, world!</h1>;

String 도 아니고, HTML도 아닌 이 문법을 JSX라고 부릅니다. 

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

DOM 안에 Element Render하기

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

https://reactjs.org/docs/react-dom.html#render

ReactDOM – React

 

Render된 Element 수정하기

리액트 Element는 불변객체로, 한번 생성하면 바꿀 수 없습니다. 따라서, 위 내용을 바탕으로 하면 새로운 element를 생성하고 ReactDOM.render()를 해야합니다. 

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

여기서 setInterval 콜백을 통해서 초마다 element 를 생성하고, ReactDOM.render를 호출합니다.

이때, React 엘리먼트가 이전에 container 내부에 렌더링 되었다면 해당 엘리먼트는 업데이트하고 최신의 React 엘리먼트를 반영하는 데 필요한 DOM만 변경합니다.

 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

컴포넌트 렌더링하기

1. ReactDOM.render() 호출

2. Welcome 엘리먼트 호출

3. Welcome 엘리먼트 작성

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

 

컴포넌트 합성

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

 

Function에서 Class로 전환

1. es6 클래스 생성 및 extends React.Component 추가

2. render() 라는 빈 메서드 추가

3. render 메서드 안으로 함수 내용 옮기기

4. props 를 this.props로 변경

 

클래스에 로컬 State 추가하기

1. render() 메서드 내 this.props.date 를 this.state.date로 변경

2. this.state를 지정하는 class constructor를 추가 (props를 기본 contructor에 전달하는지 유의)

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

 

생명주기 메서드 추가

componentDidMount() : 컴포넌트 출력물이 DOM에 렌더링 된 후 실행

componentWillUnmount() : DOM으로부터 한번이라도 삭제시 해당 생명주기 메서드 호출

 

다양한 독립변수 포함 & 독립적 업데이트

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }
  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

 

조건부 렌더링

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

 

Key의 사용

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
);

 

State 동기화된 필드 구현 (온도계)

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: '', scale: 'c'};
  }

  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }

  handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature});
  }

  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}