[trip planner 프로젝트] 2. react

* 모든 글은 글쓴이의 공부하면서 개인의견입니다. 확실한 정보는 아닙니다.

 

- 리액트란 무엇인가 (react 자습서 참고)

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.

 

리액트에서는 class 와 객체로 html 을 만들 수 있습니다.

//class 버전

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

 

//객체 버전

const ShoppingList = () => {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

 

필자는 class버전보다는 객체버전을 선호합니다.

 

 

- 엘리먼트

엘리먼트는 React 앱의 가장 작은 단위입니다.

엘리먼트는 화면에 표시할 내용을 기술합니다.

 

- Component와 Props

 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 

props는 객체 전달입니다.

 

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')
);

 

 

Hook

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.

 

 

- useState

useState는 객체에서의 state을 초기세팅하고 setState를 통해 state의 상태변화를 시킬 수 있습니다.

const [state, setState] = ustState(false); // 현재 이상태에서 state의 상태는 false

function onClick() {
	setState(true); // 이상태에서의 state의 상태는 true
}

 

- useEffect

useEffect는 page 렌더링과 동시에 실시하는 side effect 입니다.

const [state, setState] = ustState(false); // 현재 이상태에서 state의 상태는 false

useEffect(() => {
	setState(true); //현재 이상태에서의 state의 상태는 true
});	

function onClick() {
	setState(true); // 이상태에서의 state의 상태는 true
}

 

어떠한 액션을 취하지 않으면 (onClick) 이 상태에서의 state는 false로 선언하였지만, useEffect로 인해 true입니다.

저는 보통 useEffect를 axios나 fetch같은 비동기통신을 통해 데이터를 가져오는데 사용하였습니다