멋사 스터디 기록 - 02. 리액트 기초 문법

Kyle·2022년 1월 15일
0

1. JSX vs HTML

둘을 비교하기에 앞서, JSX는 뭐고 HTML은 뭔데?

JSX? HTML?

JSX는 JS안에서 HTML 마크업을 사용할수 있는 JS의 확장버전이다.
일반 HTML 태그 사용으로 가독성도 잡으면서 JS 로직이 가능하기 때문에 활용도까지 잡은 문법이다.
HTML은 마크업을 위한 언어! JS와 다른 언어이기 때문에 문법 사용도 다르다.

HTML과의 차이점

1. 형제 노드를 사용하지 않는다.

형제 노드를 사용하지 않으며 형제 노드를 사용한다고 하면 묶어주어야 한다.
묶는 것은 <div>, <Fragment>, <>를 사용한다.

리턴 값으로 2개 이상의 요소를 반환할 수 없다

function App() {
    return (
        <h1>test</h1>
        <h1>test</h1>
    );
}

아래와 같이 묶어서 하나의 요소로 반환해야 한다.

function App() {
    return (
        <div>
            <h1>test</h1>
            <h1>test</h1>
        </div>
    );
} //<div>사용
function App() {
    return (
        <React.Fragment>
            <h1>test</h1>
            <h1>test</h1>
        </React.Fragment>
    );
} //<Fragment>사용

function App() {
    return (
        <>
            <h1></h1>
            <h1></h1>
        </>
    );
} // <>사용

2. camelCase

단어 작성에 있어서 HTML에서의 classclassName으로, onclickonClick처럼 camelCase로 작성을 해주어야 한다. background-color과 같은 요소도 backGround로 작성을 해주어야 한다.

3. JS 로직 { }

JS표현식을 사용하기 위해서는 { }내부에 사용해주어야 한다.

function App() {
  const menu = "Coffee";
  const taste = ["Choco", "Vanilla", "Strawberry"];

  return (
    <>
      <h1>{Coffee}'s taste</h1>
      {cafe.map((cafe, i) => (
        <p key={i}>{cafe}</p>
      ))}
    </>
  );
}

4. 조건문


function App(){
	const name = 'Kevin'
    return <>{name === 'Kevin' ? <h1>I'm Kevin</h1> : <h1>I'm not Kevin. I'm {name}</h1></>;
} // 삼항연산자

function App() {
  const name = "Kevin";
  return <>{name === "Kevin" && <h1>I'm Kevin</h1>}</>;
} // AND연산자

5. 주석

주석은 Ctrl + /로 !

2. Class Component vs Function Component

2-1. Class Component

  • class 키워드가 필요하다.
  • component로 상속을 받아야한다.
  • render() 메소드가 반드시 있어야한다.
import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

export default App;

2-2. Function Component

  • state, lifeCycle 관련 기능이 React Hook을 통해 사용이 가능해졌다.
  • 메모리 자원을 Class Component보다 덜 사용한다.
  • Component 선언이 간편하다.
import React from 'react';
import './App.css';

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

export default App;

함수형이 클래스형보다 이후에 나왔기 때문에 더 편한 것은 사실이나 오래된 코드는 대부분 클래스형으로 되어 있기 때문에 유지보수를 위해서는 클래스형도 알고 있어야 한다.

3. State

State란 Component 내부에서 변경될 수 있는 값으로
document.querySelector(".message").innerText = message;를 대체할 수 있다.

function Message() {
  const [message, setMessage] = useState("Hello");

  // 영어일 땐 한국어로, 영어가 아닐 땐 다시 영어로.
  const handleClick = () => {
    const newMessage = message === "Hello" ? "안녕" : "Hello";
    setMessage(newMessage);
  };

  return (
    <>
      <h1 className="message">{message}</h1>
      <button onClick={handleClick}>언어 바꾸기</button>
    </>
  );
}

// 다음과 같은 코드를

class Message extends Component {
  state = {
    message: "Hello",
  };

  handleClick = () => {
    const newMessage = this.state.message === "Hello" ? "안녕" : "Hello";
    this.setState({ message: newMessage });
  };
  render() {
    return (
      <>
        <h1>{this.state.message}</h1>
        <button onClick={this.handleClick}>언어 바꾸기</button>
      </>
    );
  }
}

// state를 사용하여 다음과 같이 간편하게 나타낼 수 있다.

State 값 변경

React에서 업데이트가 되어야 한다고 알아 차리게 하기 위해서는 setState 함수를 호출해야한다.
이를 통해 React가 state의 업데이트를 확인하고 render 함수를 호출하기 때문이다.

state를 업데이트하는 과정에서 아래의 코드처럼 state 값이 변하는 경우라면 setState(prevState => newState)와 같이 이전 state값을 받아서 함수를 호출하는 것이 더 좋다.

setState()는 비동기적으로 작동하기 때문에 state를 여러번 업데이트하는 과정에서 이전 업데이트 내용이 다음 업데이트 내용으로 덮어 쓰여질 수 있고 예상치 못한 순간에 비동기 특성으로 인해 버그가 발생할 수 있기 때문이다. 또한, pureComponent에서는 작동하지 않는 문제점도 있다.

class App extends Component {
  state = {
    count: 0,
  };

	// 1
  onIncrease = () => {
    this.setState({ count: this.state.count + 1 });
  };

  onDecrease = () => {
    this.setState({ count: this.state.count - 1 });
  };

	// 2
	onIncrease = () => {
    this.setState((state) => ({
      count: state.count + 1,
    }));
  };

  onDecrease = () => {
    this.setState((state) => ({
      count: state.count - 1,
    }));
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.onIncrease}>+1</button>
        <button onClick={this.onDecrease}>-1</button>
      </div>
    );
  }
}

4. Props

Propsproperties의 약자로 컴포넌트 속성을 설정할 때 사용하는 요소이다. 상속에서 parameter를 전달하는 것이라고 생각할 수 있겠다.

4-1. defaultProps

props값이 따로 지정되지 않았을 때 default 값을 설정해주는 것이다. defaultProp도 설정되지 않았다면 아무것도 나타나지 않는다.

// Name: DEFAULT
// Age:
const Person = ({ name, age }) => {
  return (
    <div>
      <h1>Name: {name}</h1>
      <h1>Age: {age}</h1>
    </div>
  );
};

Person.defaultProps = {
  name: "DEFAULT",
};

4-2. children

component 태그 사이의 내용을 보여주는 props.

// App.js
const App = () => {
  return (
    <Person>여기 들어가는 것이 props 의 children 값이다</Person>
  );
};

// Person.js
const Person = (props) => {
  return <h1>{props.children}</h1>;
};

4-3. propTypes

타입 지정하여 검증할 때 사용한다.
import PropTypes from 'prop-types` import 해서 사용해야 한다.

// Person.js
import PropTypes from "prop-types";

const Person = ({ name, age }) => {
  return (
    <div>
      <h1>Name: {name}</h1>
      <h1>Age: {age}</h1>
    </div>
  );
};

Person.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
};

이때 부모 components 타입에 맞지 않는 props를 전달해준다면 다음과 같은 에러가 뜬다.

profile
불편함을 고민하는 프론트엔드 개발자, 박민철입니다.

0개의 댓글