콘텐츠로 이동

2023 05 09

2023-05-09

React

  • JSX(JavaScript XML)
    • class는 js예약어라 className
    • {} 를 통해서 return 문 외부의 변수나, 간단한 연산들에 대한 결과를 HTML에 띄워줄 수 있음
      • 다만 객체 정보등은 띄울수가 없음
  • 리액트 CSS
    • component.module.css 의 이름으로 컴포넌트의 종속된 css를 만들고,
    • component에서 import styles from './component.module.css'를 받아서 쓰며,
      • {styles.box} 를 통해 class 매핑해주면 뚝딱
  • 컴포넌트에 이벤트 만들어주기
    • 컴포넌트 리턴 전에 정의한 함수 매핑
    • onClick 이벤트에 바로 그냥 함수 
      export default function Function() {

    function showName() {
        console.log("Joel")
    }

    function showAge(age) {
        console.log(age)
    }

    function showText(e) {
        console.log(e.target.value)
    }

    return (
        <div>
            <h1>Hello</h1>
            <button onClick={showName}>Show name</button>
            <button onClick={() => {
                showAge(10)
            }}>showAge</button>
            <input type="text" onChange={showText}></input>
        </div>
    )
}

  • State

    • 컴포넌트가 가진 속성값
    • 이게 바뀌면 리액트가 화면 리액트가 바꿔줌
    • 변수 != state
    • useState를 임포트해오자. 해당 함수에 각각 [변수, 변수바꿀함수] 요렇게 정의해주자. 
      /**

 * Returns a stateful value, and a function to update it.
 *

 * @version 16.8.0
 * @see https://react.dev/reference/react/useState
 */
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
    • 각 컴포넌트는 독립적인 state를 가지고 있음을 기억하자! 
      import { useState } from "react"

export default function State() {
    const [name, setName] = useState("Joel")

    function changeName() {
        if (name === "Joel") {
            setName("Yewon")
        } else {
            setName("Joel")
        }
    }

    return (
        <div>
            <h1>state</h1>
            <h2>{name}</h2>
            <button onClick={changeName}>Change</button>
        </div>
    )
}

  • Props

    • Properties
    • 상위 컴포넌트에서 하위 컴포넌트로 전달해주자.
    • 상위 
      <Hello age={10} />
<Hello age={20} />
<Hello age={30} />
    • 하위
      • 받은대로만 사용할 것
      • Read Only로 객체가 넘어옴
      • 객체 자체가 그냥 {age: 30} 이런식으로 넘어오기에 구조 분해 할당할 수도 있음 
        export default function Hello(props) {
    // 안에서 {{props.age}} 처럼 쓰자!
}
    • state와 props로 화면에 보여줄 정보를 처리하자
    • 한 컴포넌트가 가진 state를 props로 (당연히) 넘길 수 있음
    • 개발자가 해줄것은 데이터만 적절히 바꿔주는 것
      • 컴포넌트는 알아서 렌더링을 다시 하고, 화면의 UI 정보는 갱신된다

  • JS 구조 분해 할당

    • Destructing Assignment
    • 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

    • [배열] 

      let users = ['Mike', 'Tom', 'Jane']

let [user1, user2, user3] = users;

console.log(user1) // 'Mike'
console.log(user2) // 'Tom'
console.log(user3) // 'Jane'

      • 기본값 줄 수 있음 
        let [a, b, c] = [1, 2]
// 이러면 c = undefined

let [a=3, b=4, c=5] = [1, 2];
// 이러면 기본값 줘서 미연에 방지 할 수 있음
      • 일부 반환값을 무시할 수도 있음 
        let [user1, ,user2] = ['Mike', 'Tom', 'Jane', 'Tony'];

console.log(user1) // 'Mike'
console.log(user2) // 'Jane'
      • 배열 내 원소 swap도 쉽게 구현이 가능해지는 이점 
        let a = 1;
let b = 2;
[a, b] = [b, a];
    • [객체]
      • 객체 구조 분해 
        let user = {name : 'Mike', age : 30}
let {name, age} = user;
let {age, name} = user;
let {name: userName, age: userAge} = user;
let {name, age, gender = 'male'} = user;

console.log(name); // 'Mike'
console.log(age); // 30
console.log(userName); //'Mike'
console.log(userAge); // 30
console.log(gender); // 'male'
  • React Hook!
    • React 16.8 부터 사용가능
    • useState()
      • 상태값, 상태변화함수 뚝딱 정의하여 컴포넌트 안에서 휘뚜루마뚜루 변수 상태관리하자
    • useEffect()
      • 어떤 상태값이 바뀌었을 때 동작하는 함수를 작성할 수 있음
      • 함수를 매개변수로 넘겨줄 수 있다
      • 이런걸로 API call 해도 되겠지?

  • useEffect()

    • 어떤 상태값이 바뀌었을 때 동작하는 함수를 작성할 수 있음
    • 첫 매개변수로 함수를 넣어주세요 
      export default function DayList() {
    useEffect(() => {
        console.log("Count Change");
    })

    return (
        <>
          <ul className="list_day">
            {days.map(day => {
              <li key={day.id}>
                <Link to={`/day/${day.day}`}>Day {day.day}</Link>
              </li>
            })}
          </ul>
        </>
    )
}
    • 이게 근데 onClick으로 박아둔 함수 실행될때마다 무한정 동작할 수 있어
    • 따라서 의존성 배열을 통해서, 해당 배열 안에 담긴 변수가 바뀔 때만 동작하도록 구동을 해볼 수 있다 
      export default function DayList() {
    useEffect(() => {
        console.log("Count Change");
    }, [count])
}
    • useEffect() 렌더링 최초에 한번만 하고 싶다면, 의존성 배열에 [] 빈배열을 넣어두자 
      export default function DayList() {
    useEffect(() => {
        console.log("Count Change");
    }, [])
}
  • Custom Hooks
    • 반복적인 코드에 대해서 customHook을 만들어서 처리해보자! 
      export default function Day() {
    const { day } = useParams();
    const words = useFetch("https://url");
}

export default function useFetch(url) {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch(url)
            .then(res => {
                return res.json();
            })
            .then(data => {
                setData(data);
            });
    }, [url])

    return data;
}