[유데미x스나이퍼팩토리] 프로젝트 캠프 Next.js 1기 6일차

Tailwind css

// Tailwind css

<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
	<p className="text-2xl text-blue-400">hello world</p>
</div>

위와 같이 태그에 스타일을 입력하여 적용할 수 있으며 Tailwind css을 장단점 및 사용해보면서 궁금한점 등을 정리했던 글을 참고한다.

---

props

• props는 컴포넌트 간에 데이터를 전달하는 방법이다.
• props는 상위 컴포넌트로 데이터를 전달 받는다. 즉 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달 한다.

// App.tsx

const App = () => {
  const onClickHandler = (name: string, age: number) => {
    alert(`이름 : ${name}, 나이 : ${age}`);
  };

  return (
    <div>
      <User name="홍길동" age=25 onClickHandler={onClickHandler}/>   // user 컴포넌트로 user에 필요한 데이터를 전달한다.
    </div>
  );
}


// User.tsx
interface IUser {
  name : string;
  age : number;
  onClickHandler : name: string, age: number) => void;
}

const User = ({ name, age, onClickHandler }: IUser) => {   // 지정한 type에 맞춰 user 데이터를 받아 사용한다.
  return (
    <div>
      <p>이름 : {name}</p>
      <p>나이 : {age}</p>
      <button onClick={() => onClickHandler(name, age)}>user 정보 출력</button>
    </div>
  );
};

export default User;

useState

• 리액트에서 상태를 정의하고 해당 상태를 관리하는데 사용하는 훅

// 배열 첫번째(state)는 값을 읽어오는데 사용하는 변수이고 두번째(setState)는 상태값을 업데이트 하는데 사용한다.

const [state, setState] = useState(initialState);

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>   // count 값을 읽어오는데 초기값은 0으로 시작
      <button onClick={() => setCount(count + 1)}>   // 버튼을 클릭하면 setCount 1씩 증가는 함수가 실행되어 초기값 count 0에서 1로 업데이트 됨
        Click me
      </button>
    </div>
  );
}

---