React 1.

REACT

• 기존 화면단(뷰)을 날리고 새로운 화면단(뷰)을 렌더링하는 방식
• 오직 뷰(화면단)만 신경쓰는 라이브러리

Component

• 리액트에서 화면의 특정부분을 정하는 선언체
• 화면의 부분을 나눠서 만듦
• 컴포넌트를 사용하게 되면 코드의 재사용률이 상승

Rendering

• 사용자에게 화면을 표출하는 메소드
• 화면이 처음 표출되는 초기 렌더링과 데이터가 변경됐을 때 다시 실행되는 리렌더링으로 구분
• render() 라는 메소드로 실행

Virtual DOM

• 리렌더링 시에 새로운 뷰가 바로 DOM에 적용되는 것이 아니고 새로 생성된 뷰는 Virtual DOM에 렌더링
• 이전 생성된 Virtual DOM과 비교
• 두 Virtual DOM의 바뀐 부분만 실제 DOM에 적용

JSX

• 자바스크립트의 확장문법, XML과 매우 유사함
• 브라우저가 실행되기 전에 일반 자바스크립트 코드로 변환됨
• JSX 코드는 보기 편하고 HTML 코드를 작성하는 것과 비슷함
• JSX 코드로 작성된 컴포넌트는 태그처럼 사용 가능

JSX 문법

• 컴포넌트에 여러가지 요소가 포함되면 반드시 부모요소 하나로 묶어줘야 함
• 자바스크립트의 표현식은 {}로 감싸서 사용
• if문 대신 삼항조건연산자 사용
• &&연산자를 이용하여 조건부 렌더링 가능
• 컴포넌트나 태그에 인라인 스타일을 사용할 경우 camelCase사용
• class 대신 className 사용
• closing tag없으면 에러 발생

Component

• 클래스형 컴포넌트와 함수형 컴포넌트로 나뉨
• 함수형 컴포넌트와 Hooks 사용하는 것은 권장

클래스형 컴포넌트

class 컴포넌트명 extends Component {
	render() {
	}
}

• 클래스 내에서 render메소드 호출하여 렌더링함

components 폴더에 HelloReact.js 파일 생성하고 불러오기

import logo from './logo.svg';
import './App.css';
import HelloReact from './components/HelloReact';

function App() {
  return (
    <HelloReact/>
  );
}

export default App;

삼항연산자에서 null값 뽑아낼 때

import React, { Fragment } from 'react';

const HelloReact = () => {
    const name = "리액";
    return (
        <Fragment>
            {name === '리액트' && <h1>리액트입니다.</h1> }
        </Fragment>
    );
};

export default HelloReact;

스타일 줄때

in js

import React, { Fragment } from 'react';

const HelloReact = () => {
    const name = "리액트";
    const style = {
        backgroundColor: 'black',
        color: 'white',
        fontSize: '48px',
        fontWeight: 'bold',
        padding: 16
    }
    return (
        <Fragment>
            {name === '리액트' && <h1 style={style}>리액트입니다.</h1> }
        </Fragment>
    );
};

export default HelloReact;

in css

.css

.react {
  background-color: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 16px;
}

.js

import React, { Fragment } from 'react';
import '../App.css';

const HelloReact = () => {
    const name = "리액트";
    return (
        <Fragment>
            {name === '리액트' && <h1 className='react'>리액트입니다.</h1> }
        </Fragment>
    );
};

export default HelloReact;

props

App.js

import PropsOfComponent from './components/PropsOfComponent';

function App() {
  return (
    <PropsOfComponent name='React'/>
  );
}

export default App;

PropsOfComponent.js

import React from 'react';

const PropsOfComponent = (props) => {
    return (
        <div>
            안녕하세요. 제 이름은 {props.name}입니다.
        </div>
    );
};

export default PropsOfComponent;

props 초기값 지정

import React from 'react';

const PropsOfComponent = (props) => {
    return (
        <div>
            안녕하세요. 제 이름은 {props.name}입니다.
        </div>
    );
};

PropsOfComponent.defaultProps = {
    name: '기본이름',
};

export default PropsOfComponent;

useState

import React, { useState } from 'react';

const UseState = () => {
    const [message, setMassage] = useState('');
    const [number, setNumber] = useState(0);
    const [color, setColor] = useState('black');

    const onEnter = () => setMassage('안녕하세요.');
    const onExit = () => setMassage('안녕히 가세요.');

    const onIncrease = () => setNumber(number + 1);
    const onDecrease = () => setNumber(number - 1);
    return (
        <div>
            <button onClick={onEnter}>입장</button>
            <button onClick={onExit}>퇴장</button>
            <h1 style={{color}}>{message}</h1>
            <button style={{color: 'red'}} onClick={() => setColor('red')}>빨간색</button>
            <button style={{color: 'green'}} onClick={() => setColor('green')}>초록색</button>
            <button style={{color: 'blue'}} onClick={() => setColor('blue')}>파란색</button>
            <br />
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
            <h1>{number}</h1>
        </div>
    );
};

export default UseState;

event handling

import React from "react";

const EventPractice = () => {
  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력하세요"
        onChange={(e) => {
          console.log(e.target.value);
        }}
      />
    </div>
  );
};

export default EventPractice;

위와 동일하게 동작하고 useState 이용

import React, { useState } from "react";

const EventPractice = () => {
    const [message, setMessage] = useState('');
    
  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        value={message}
        placeholder="아무거나 입력하세요"
        onChange={(e) => {
          setMessage(e.target.value)
        }}
      />
    </div>
  );
};

export default EventPractice;

함수로 만들어서 사용

import React, { useState } from "react";

const EventPractice = () => {
  const [message, setMessage] = useState("");

  const handleChange = (e) => {
    setMessage(e.target.value);
  };

  const handleClick = () => {
    alert(message);
    setMessage("");
  };

  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력하세요"
        onChange={handleChange}
        value={message}
      />
      <button onClick={handleClick}>확인</button>
    </div>
  );
};

export default EventPractice;

useRef

import React, { useRef, useState } from "react";

const UseRef = () => {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: "",
  });

  const nameInput = useRef();

  const { name, nickname } = inputs;

  const handleChange = (e) => {
    const { name, value } = e.target;
    const nextInput = {
      ...inputs,
      [name]: value,
    };
    setInputs(nextInput);
  };

  const handleClick = () => {
    alert(name + ": " + nickname);
    setInputs({
      name: "",
      nickname: "",
    });
    console.log(nameInput);
    nameInput.current.focus();
  };
  return (
    <div>
      <input
        type="text"
        name="name"
        placeholder="이름"
        onChange={handleChange}
        value={name}
        ref={nameInput}
      />
      <input
        type="text"
        name="nickname"
        placeholder="별명"
        onChange={handleChange}
        value={nickname}
      />
      <button onClick={handleClick}>확인</button>
    </div>
  );
};

export default UseRef;

array rendering

import React, { useState } from "react";

const ArrayRendering = () => {
  const [names, setNames] = useState([
    { id: 1, text: "HTML" },
    { id: 2, text: "CSS" },
    { id: 3, text: "JQuery" },
    { id: 4, text: "React" },
  ]);
  const [inputText, setInputText] = useState("");
  const [nextId, setNextId] = useState(5);
  // const names = ["HTML", "CSS", "JQuery", "React"];

  const handleChange = (e) => {
    setInputText(e.target.value);
  };

  const handleClick = () => {
    const nextNames = names.concat({
      id: nextId,
      text: inputText,
    });
    setNextId(nextId + 1);
    setNames(nextNames);
    setInputText("");
  };

  const onRemove = (id) => {
    // filter함수 사용하여 제거 기능 구현
    const nextNames = names.filter((name) => name.id !== id);
    setNames(nextNames);
  };

  // 배열의 map 함수를 이용하여 새로운 배열 만들기
  const nameList = names.map((name) => (
    <li onDoubleClick={() => onRemove(name.id)} key={name.id}>
      {name.text}
    </li>
  ));
  return (
    <div>
      <input type="text" onChange={handleChange} value={inputText} />
      <button onClick={handleClick}>추가</button>
      <ul>{nameList}</ul>
    </div>
  );
};

export default ArrayRendering;

input창에 입력하고 추가 버튼 누르면 아래 리스트에 추가되고,
리스트를 더블클릭하면 해당 아이템 제거됨

/..

정말 당최 무슨말인지 모르겠네,,,
강사님 따라 적기는 하지만 함수 하나하나 정확하게 어떻게 구현되는 건지 파악이 제대로 안되어있음...
JS 강의 설렁설렁 들을 탓이지뭐....