TIL_React (component, JSX, props, state)

웹, 데스크탑, 모바일 등 다양한 플랫폼에서 활용할 수 있는 프론트엔드 라이브러리

웹 페이지는 유저와 수많은 interaction(상호작용)이 증가할수록 상태관리가 어렵다.
이런 문제로 인해 React가 만들어짐

HTML tag

<div class="tweet"> <span class="userId">@hoony</span> <div class="contants">Hi, I am hoony:D</div> <div class="time">43 seconds ago</div> </div>

Component

<Tweet userId="hoony" time="43"> Hi, I am hoony:D </Tweet>

직관적, 재사용성 ⬆️

JSX - 자바스크립트의 확장 문법

class App extends Componenet{ render() { return( <div> <h1>Hello, World</h1> </div> ) } }

JSX 사용안한다면?
React.createElements 를 사용해야 하는데 이것은 복잡하고, 가독성도 떨어진다.

React.createElement("div", null, React.createElement("h1", null, "Hello, World"));

JSX 사용시 지켜야할 사항

1. 반드시 하나의 엘리먼트로 감싸야한다.
2. 자바스크립트 코드를 적용할 땐 {} 안에 작성
3. JSX 내부에서 if 문 사용 할 수 없다.
삼항연산자를 사용
4. 엘리먼트에 클래스 이름 적용 시 class="a" (x) className="a" (O)

Component

- 하나의 의미를 가진 독립적인 단위 모듈

- props 라고 하는 임의의 입력을 받아 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환
- 컴포넌트를 만들 땐

import React from 'react';

를 통해 리엑트를 불러와야 한다.
- 컴포넌트는 함수형태로 작성할 수도 있고, 클래스형태로 작성할 수도 있다.

import React from 'reacct'; // Component의 이름은 항상 대문자로 시작 // function Component function Hello() { return( <div> <h1>Hello, World</h1> </div> ) } export default Hello; --------------------------------------- import React from 'reacct'; // class Component class Hello extends Componenet{ render() { return( <div> <h1>Hello, World</h1> </div> ) } } export default Hello;

- 아래 코드는 App 이라는 컴포넌트를 내보내겠다는 의미이다.

export default App;

- 이렇게 하면 다른 컴포넌트에서 불러와서 사용할 수 있다.
- 다른 컴포넌트에서 App컴포넌트를 불러 온다면 어떻게 해야할까?

import React from 'react'; import Hello from './Hello.js'; // import ... from 을 이용해 App 컴포넌트를 불러온다. function App() { return( // JSX 문법으로 반드시 하나의 엘리먼트로 감싼다. // 아래에 <div> 로 감쌌지만 <></>을 사용할 수도 있다. // App 컴포넌트 랜터링 <div> <Hello /> </div> ) } export default App;

props 와 state
- props 는 컴포넌트 외부로부터 전달받은 값
- state 는 컴포넌트 내부에서 변화하는 값
- 둘 다 변경이 발생하면, 랜더가 다시 일어날 수 있다.

props

- props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값,
- 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정할 수 없다.

예를들어 App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name 라는 값을 전달해주려고 할때 어떻게 할까?

import React from 'react'; import Hello from './Hello.js'; function App() { return( <div> <Hello name="Hoony" /> </div> ) } export default App;

Hello 컴포넌트에서 name 값을 사용하고 싶을 땐 어떻게 하면 될까?

import React from 'reacct'; function Hello(props) { return( <div> <h1>Hello, {props.name}</h1> </div> ) } export default Hello;

컴포넌트에게 전달되는 props 는 파라미터를 통하여 조회하고, props 는 객체 형태로 전달된다.
만약 name 값을 조회하고 싶다면 {props.name} 을 조회

defaultProps 로 기본값 설정
컴포넌트에 props 를 지정하지 않고, 사용할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값 설정

import React from 'reacct'; function Hello({ name }) { return( <div> <h1>Hello, { name }</h1> </div> ) } export default Hello;

태그 사이에 props 를 넣는 방법은?

import React from 'reacct'; function Hello(props) { return( <> <div>{prop.children}</div> </> ) } export default Hello;

props 에 대해 알아두어야 할 것
- 읽기 전용이다.
- 함수나 클래스 컴포넌트 모두 컴포넌트의 자체 props 를 수정해서는 안된다.
- 모든 React 컴포너트는 자신의 props를 다룰 때 반드시 순수함수처럼 동작해야 한다.

state

- 변할 수 있는 값
- 컴포넌트 내부에서 변하는 값
- 함수 컴포넌트 x , class 컴포넌트로 만들어야 함.
- 토글 스위치 예시로 state 를 어떻게 사용하는지 보자

import React from 'reacct'; class App extends React.Componenet{ constructor(props) { super(props) this.state = { isOn: false } this.handleClick = this.handleClick.bind(this) // 이벤트 처리시 바인드 해줘야 함! } handleClick() { // this가 false 면 true 로 바꾸기 this.setState(state => ({ isOn: !state.isOn })); } render() { return( <h1> <button onClick={this.handleClick}>{this.state.isOn ? 'On' : 'Off'}</button> </h1> ) } } export default App;