이것만 알아도 React 기본 마스터 !!

//App.js

import React from 'react';

는 리액트를 불러온다. 어디서?

 

리액트 프로젝트를 만들 때 node_modules 디렉토리도 함께 생성이 되는데 그 안에 react 모듈이 설치 돼!

그래서 그 react를 불러오는거지!!

 

근데 원래 모듈을 불러와서 사용하는 건 사실 브라우저에서는 없던 기능!

브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 Node.js에서 지원하는 기능!!

 

이러한 기능을 브라우저에서도 사용하려고 번들러 ( ex: 웹펙, Parcel, browserify ... )를 사용함

 

---

 

함수에서 undefined를 렌더링 하면 오류 나온다!

// 이렇게 하면 오류나온다!

function App() {
    const name = undefined;
    return name;
}

어떤 값이 undefined일 수도 있어?

그러면 OR연산자를 사용해서 해당값이 undefined일 때 사용할 값을 지정해 !

이렇게라도 오류 방지 해야 된다~

function App() {
    const name = undefined;
    return name || '값이 undefined야.';
}

 

근데 JSX 내부에서 undefined를 렌더링하는 것은 괜찮아!

function App() {
    const name = undefined;
    return <div>{name}</div>
}

 

따라서! name값이 undefined 일 때, 보여 주고 싶은 문구가 있다면!

function() {
    const name = undefined;
    return <div>{name || '보여줄 문구'}</div>
}

 

---

 

주석

 

---

 

컴포넌트

함수형과 클래스형이 있는데 아이엠폼은 함수형!

 

함수형 컴포넌트의 장점

• 클래스형 컴포넌트보다 선언이 쉽다.
• 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다.
• 프로젝트를 완성하여 빌드한 후 배포할 때 결과물의 파일 크기가 더 작다.

※ 함수형 컴포넌트와 클래스형 컴포넌트는 성능과 파일크기 면에서 사실상 별 차이가 없으므로 중요하게 생각 노노!

 

함수형 컴포넌트의 단점

• state와 라이프사이클 API의 사용이 불가능 -> 리액트 v16.8 업데이트 이후 Hooks 기능이 도입되면서 해결!

※ 리액트 공식 매뉴얼에서 컴포넌트를 작성 할 때 함수형 컴포넌트와 Hooks를 사용하도록 권장!

 

---

 

코드 줄이기!

const MyComponent = props => {
  return (
    <div>
      안녕하세요. 제 이름은 {props.name} 입니다!<br/>
      children 값은 {props.children} 입니다!
    </div>
  )
}

 

여기서 계속 props.가 붙지?

이럴 때 비구조화 할당 문법!

이 코드를 더 줄여보자고~

const MyComponent = props => {
  const { name, children } = props;
  return (
    <div>
      안녕하세요! 제 이름은 {name}입니다!<br></br>
      children 값은 {children} 입니다!
    </div>
  )
}

더 원해 ? 고고고곡고

const MyComponent = ({ name, children }) => {
  return (
    <div>
      안녕하세요. 제 이름은 {name} 입니다 <br/>
      children 값은 {children} 입니다!
    </div>
  )
}

 

---

props

좌 MyComponent, 우 App.js

예를 들어 App 컴포넌트에서 MyComponent를 사용할 때 props를 바꿔줘야 값이 변경될 수 있지!

빨간 밑줄 친 부분이 props!

 

반면에 MyComponent에서는 전달받은 name 값을 직접 바꿀 수 없어!

 

state

나는 함수형이니까 useState를 사용!

import React, { useState } from 'react';

const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하시오');
  const onClickLeave = () => setMessage('안녕히 가시오');
  
  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </div>
  )
}

export default Say;

useState 함수의 인자에는 상태의 초기값을 넣어줘!

 

클래스형 컴포넌트에서의 state 초기 값은 객체형태여야 하지만!

useState에서는 반드시 객체가 아니여도 상관이 없음! 값의 형태는 자유!! (숫자, 문자열, 객체, 배열 ~~)

 

함수를 호출하면 배열이 반환되는데

배열의 첫번째 원소는 현재 상태, 두번째 원소는 상태를 바꿔주는 함수!

이 함수가 바로 세터(Setter)함수!!

 

---

 

const array = [1, 2];

const one = array[0];
const two = array[1];

array 안에 있는 값을 one과 two에 담아주는 코드!

이걸 비구조화 할당을 사용한다면 깔끔하게 정리가 가능!

const array = [1, 2];

const [one, two] = array;

이렇게 표현이 가능! 깔끔하다 깔끔해~

까꼼하게!

 

---

 

state를 사용할 때 주의!

 

state 값을 바꿔야 할 때는 setState, useState를 통해 전달받은 세터 함수를 사용해야 한다!!

// 잘못된 예
const [object, setObject] = useState({a: 1, b: 1});
object.b = 2;

// 올바른 예
const object = { a: 1, b: 1 };
const nextObject = {...object, b: 2}; //사본을 만들어서 b 값만 덮어쓰기

 

그렇다면 객체나 배열을 업데이트 할 때는 !?

// 객체 다루기
const object = { a: 1, b: 2, c: 3 };
const nextObject = {...object, b: 2}; //사본을 만들어서 b 값만 덮어쓰기


// 배열 다루기
const array [
  { id: 1, value: true },
  { id: 2, value: true },
  { id: 3, value: false }
];
// 새 항목 추가
let nextArray = array.concat({ id: 4 });
// id가 2인 항목 제거
nextArray.filter(item => item.id !== 2);
// id가 1인 항목의 value를 false로 설정
nextArray.map(item => (item.id === 1 ? {...item, value: false } : item ));

 

 

---

 

 

객체 안에서 key를 [ ]로 감싸면 [ ] 안의 레퍼런스가 가리키는 실제 값이 key 값으로 사용 된다!

const name = 'varianKey';
const object = {
  [name]: 'value'
};

// result
{
  'varianKey': 'value'
}


// 활용 코드
handleChange = e => {
  this.setState({
    [e.target.name]: e.target.value
  })
}

 

---

클래스형을 함수형 컴포넌트로 변경해보자ㅏㅏ

// 클래스형 컴포넌트
import React, {Component} from 'react';

class EventPractice extends Component {
  state = {
    username: '',
    message: ''
  }

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleClick = () => {
    alert(this.state.username + ':' + this.state.message);
    this.setState({
      username: '',
      message: ''
    })
  }
  
  handleKeyPress = (e) => {
    if(e.key === 'Enter') {
      this.handleClick();
    }
  }

  render() {
    return(
      <div>
        <h1>이벤트 연습</h1>
        <input type="text" name="username" placeholder="사용자명" value={this.state.username} onChange={this.handleChange} />
        <input type="text" name="message" placeholder="아무거나" value={this.state.message} onChange={this.handleChange} onKeyPress={this.handleKeyPress}/>
        <button onClick={this.handleClick}>클릭</button>
      </div>
    )
  }
}

export default EventPractice;

// 함수형 컴포넌트