TIL <7> React (JSX, props, state 등)

- JSX

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

위의 태그 문법은 문자열도, HTML도 아닌 자바스크립트의 확장 문법인 JSX이다.

JSX는 자바스크립트의 모든 기능이 포함되어 있으며 React 엘리먼트를 생성하는 역할을 한다.

React에서는 JSX를 함께 사용하여 UI가 실제로 어떻게 보일지 설명하는 것을 권장하고, JSX를 사용하는 것이 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각하지만 필수적으로 사용해야 하는 것은 아니다.

아래 코드는 JSX 사용 여부는 다르지만 동일한 예시이다.

//JSX 사용O
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

//JSX 사용X
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

- props

상위 컴포넌트가 하위 컴포넌트에 내려주는 데이터로 객체 인자이다.

하위 컴포넌트는 임의의 입력, 객체 인자인 props를 받아들이고 어떤 것이 화면에 나타나야 하는지를 설명하는 React 엘리먼트를 반환한다.

- state

props와 유사하지만 컴포넌트에 의해 완전히 제어되며 private 속성으로

직접 수정할수 없고 setState()를 사용해서만 수정할 수 있다.

- life cycle

컴포넌트가 브라우저에 보여질 때, 업데이트 될 때, 사라질 때, 각 단계 전/후로 특정 메서드가 호출되는 것을 생명주기라고 한다.

모든 컴포넌트는 여러 종류의 생명주기 메소드를 가진다.

- functional component vs class component

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

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

위의 두 컴포넌트는 작성된 형식이 다르나 동일한 내용을 가진다.

이전에는 class로 작성된 컴포넌트만이 state와 life cycle를 사용할 수 있다거나 등의 추가 기능을 가지고 있었지만

이제는 React Hooks의 useState와 useEffect를 사용하여 함수형 컴포넌트에서도 state와 life cycle 사용이 가능하다.

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

    componentDidMount() {
        this.time = setInterval(() => {
            this.changeTime()
        }, 1000)
    }

    componentWillUnmount() {
        clearInterval(this.time)
    }

    changeTime() {
        this.setState({ date: new Date() })
    }

    render() {
        return (
            <div className="clock">
                <h1>Hello! This is a class component clock.</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        )
    }
}

위의 컴포넌트를 React Hooks를 사용하여 함수형으로 바꾸면 아래와 같다.

const ClockUsingHooks = props => {
    const [time, setTime] = useState(new Date())

    const changeTime = () => {
        setTime(new Date())
    }

    useEffect(() => {
        const tick = setInterval(() => {
            changeTime()
        }, 1000)
        return () => clearInterval(tick)
    })
    return (
        <div className="clock">
            <h1>Hello! This is a function component clock.</h1>
            <h2>It is {time.toLocaleTimeString()}.</h2>
        </div>
    )
}

저작자표시

끄적거림