[5] React.js 입문

실습 준비하기

확장프로그램 설치

- ESLint : 실행전 VS Code에서 미리 오류를 보여줌

- eslint 옵션 설정

rules: {
	...
      "no-unused-vars": "off",  //사용하지않는 변수를 오류로 알려줌 off
      "react/prop-types": "off",  //리액트를 더욱 안전하게 사용하도록 하는 옵션 off
},

 

 React 컴포넌트

- 두가지 컴포넌트 생성 방법(+ class는 잘 사용하지 않음)

function Header(){
  return(
    <header>HI</header>
  );
};

const Header2 = () => {
  return(
    <header>HI2</header>
  );
};

 

- 화면에 렌더링하기

부모컴포넌트(root컴포넌트) App, 자식컴포넌트 Header, Header2

function App() {
  return (
    <>
      <Header></Header>
      <Header2></Header2>
    </>
  )
}

 

- 모듈화를 위한 컴포넌트 파일 분리

컴포넌트 파일 분리

컴포넌트 파일 export와 import

- 부모/자식 구조 컴포넌트

 

JSX로 UI표현하기

JSX (Javascript Extensions) : 확장된 JS문법, react에서 사용

 

JSX 주의사항

1. 중괄호 내부는 JS 표현식만 넣을수 있음

2. 숫자, 문자열, 배열 값만 렌더링 됨

3. 모든 태그는 닫혀있어야 함

4. 최상위 태그는 반드시 하나 (빈 태그<>는 렌더링시 생략됨)

 

css 분리/import

 

Props.로 데이터 전달하기

- props의 유무가 다를 경우 defaultProps 사용 (없으면 오류발생)

- props의 정보가 많을 경우 객체로 묶어서 활용 - spread 연산자

- 자식요소 전달 가능 : 요소뿐 아니라 컴포넌트도 전달 가능, 부모->자식 전달가능, 자식->부모 전달 불가능

 

이벤트 처리하기

이벤트 핸들링(event handling) : 이벤트가 발생했을때 그것을 처리하는 것

- React의 합성이벤트 : 브라우저마다 다른 이벤트를 통일된 규칙으로 적용

 

State로 상태관리하기

State : 현재 가지고있는 형태나 모양을 정의, 변화할 수 있는 동적인 값

 

- useState

① : state의 현재값  ② : state를 변경시키는 상태변화 함수

 

∴ 구조분해 할당으로 배열 표현

∴  컴포넌트의 state값이 바뀌면 컴포넌트가 return을 다시 그림

function App() {
  const [state, setState] = useState();

  return (
    <>
      <h1>{state}</h1>
      <button
        onClick={()=>{
          setState(state + 1);
        }}
      >
      +
      </button>
    </>
  )
}

 

State를 Props로 전달하기

- 컴포넌트가 리렌더링 되는 경우

1) state 변경시  2) props변경시 

3) 부모 컴포넌트 변경시 -> 여러개의 자식 컴포넌트가 있다면 Props 변경시 모두 리렌더링 되므로 컴포넌트를 분리(.jsx)해서 import 하는게 효율적

 

State로 사용자 입력 관리하기1

- useState로 사용자 입력관리

import { useState } from "react";

const Register = () => {
    const [name, setName] = useState("이름");   //초기값 설정

    const onChangeName = (e) => {
        console.log(e);	//console.log에서 확인가능
        setName(e.target.value);
    }
    
    return(
      <div>
        <input
            value={name}	//state의 name을 가짐
            onChange={onChangeName} 
            placeholder={"이름"}
        />
      </div>
    );
};

export default Register;

e 확인

 

State로 사용자 입력 관리하기2

- 반복된 구문 간단히

//분리된 state들을 하나로

//before
const [name, setName] = useState("");   //초기값 설정
const [birth, setBirth] = useState("");
const [country, setCountry] = useState("");
const [bio, setBio] = useState("");

//after
const [input, setInput] = useState({
    name:"",
    birth:"",
    country:"",
    bio:""
});

console.log(input);

console에서 한번에 확인 가능

 

//변경된 state에 맞게 수정

//before
const onChangeName = (e) => {
    console.log(e);
    setName(e.target.value);
}

//1step
const onChangeName = (e) => {
    setInput({
        ...input,
        name: e.target.value,
    })
}

<input
    value={input.name}	//value값 변경
    onChange={onChangeName}  
    placeholder={"이름"}
/>

//2step
 const onChange = (e) => {
    setInput({
        ...input,   //기존 값 나열
        [e.target.name] : e.target.value,   //[]는 e.target의 property key로 설정
    })
}

<input
    name="name"
    value={input.name}
    onChange={onChange}  
    placeholder={"이름"}
/>

 

useRef로 컴포넌트의 변수 생성하기

useRef : 새로운 reference객체를 생성하는 기능, useState와 유사하나 리렌더링x

const countRef = useRef(0);
const onChange = (e) => {
    countRef.current++;
    console.log(countRef.current);	//리렌더링은 없지만 숫자증가 확인가능

    setInput({
        ...input,
        [e.target.name] : e.target.value,
    })
}

 

 const inputRef = useRef(0);
 const onSubmit = () => {
    if(input.name === ""){
        console.log(inputRef.current);
        inputRef.current.focus();	//포커스 주기
    }
}
<input
    ref={inputRef}	//useRef를 사용하기 위한 속성 추가
    name="name"
    value={input.name}
    onChange={onChange}  
    placeholder={"이름"}
/>
<button onClick={onSubmit}>제출</button>

접근하고자하는 요소 확인가능

 

React Hooks

React Hooks : 클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 돕는 메서드

ex) useState, useRef, useEffect, useReducer..

1. 함수 컴포넌트 내부에서만 호출 가능

2. 조건문, 반복문 내부에서 호출 불가

3. use접두사를 이용해서 나만의 Hook제작 가능 (Custom Hook)

//3. 반복된 로직 분리, custom hook -> 보통 hooks폴더/useInput.jsx 로 파일분리
function useInput(){
    const [input, setInput] = useState("");
    const onChange = (e) => {
        setInput(e.target.value);
    };
    return [input, onChange];
}

const HookExam = () => {
    const [input, onChange] = useInput();	//반복 사용 가능
    const [input2, onChange2] = useInput();
    
    const state = useState();    //1.
    if(){} //2.조건부 호출x
    for(){}
    
    return(
      <div>HookExam</div>
    );
};

export default HookExam;

 

 

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 | 이정환 Winterlood - 인프런