[새싹x코딩온] 풀스택 개발자 부트캠프 과정 12 주차-1 React Style, hooks

 

React Hooks📌

리액트는 다양한 훅(hook)을 지원하는데 대표적으로 사용되는 훅들은 아래와 같습니다

 

useState() //상태 관리를 위한 가장 기본적인 훅
useRef() //참조(레퍼런스)를 생성하고 관리할 수 있는 훅 (DOM 접근, 변수보존 등으로 사용가능)
useEffect() // 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅
useMemo() // 메모이제이션을 통해 함수의 리턴값을 재사용할 수 있게 해주는 훅
useCallback() // 함수를 메모이제이션하여 불필요한 렌더링을 줄이게 해주는 훅
useReDUCER() // 복잡한 컴포넌트 상태로직을 리듀서 함수를 통해 관리할 수 있는 훅
useContext() // 리액트에서 전역적으로 접근 가능한
//데이터나 함수를 관리하고, 필요한 컴포넌트에서 그 값을 바로 가져와서 사용할 수 있도록 도와주는 훅

useState (다시 학습해 보기)📌

리액트에서는 컴포넌트 단위로 개발되는데 렌더링이 될 때마다 컴포넌트의 함수를 새로 호출하기때문에 컨포넌트 내에서 일반 변수로 상태관리를 할 수가 없습니다 그 이유는 리액트는 컴포넌트 내에서 일반변수를 사용하게되면 렌더링 될때마다 값이 초기화되기 때문 사용할 수 없는데 이 때문에 리액트가 상태를 추적하는 useState로 사용합니다 그리고 리액트는 useState가 변경될 때마다 이 값이 속한 컴포넌트를 다시 렌더링 하여 값을 최신화합니다

 

useRef (다시 학습해 보기) 📌

useRef는 리 렌더링이 필요하지 않은 데이터를 저장하는 데 사용, 또는 DOM 요소를 직접 접근해야 할 때 사용합니다

리액트에서 일반변수 데이터 값은 렌더링 될 때마다 초기화되는 특징을 갖고 있는데 이때 useState 또는 useRef로 지정하지 않은 변수는 렌더링을 할 때마다 초기화됩니다

 

여기서 생기는 궁금증! 🤔

- Ref는 데이터 보존과 DOM참조 역할만 할 뿐이면 DOM을 쓰지 않을 땐 State를 써도 상관없지 않나요?

비슷하지만 State와 살짝 다른 점을 갖고 있는데 Ref는 값이 변한다고 해서 컴포넌트가 새롭게 렌더링이 되지 않기 때문에 값이 변해도 DOM 상에서는 변경된 값이 보이지 않습니다 반면 State는 값이 변하면 무조건 컴포넌트를 리렌더링 하기 때문에 꼭 실시간으로 변해야 하는 값이 아니라면 Ref를 사용하는 게 좀 더 성능적인 측면에서 좋을 것 같아요!

 

- DOM 조작을 꼭 Ref로 해야 하는 이유가 뭔가요?

리액트에서 document.querySelector로 요소를 컨트롤하지 않는 이유는 바로 리액트는 가상 DOM을 생성하고 접근하기 때문인데요 document.querySelector은 실제 DOM돔 그리고 문서 내부의 모든 요소를 검색하기 때문에 실제 DOM과 가상의 DOM이 중복되어 충돌이 발생할 수 있습니다 Ref는 가상 DOM의 내부요소만 접근하기 때문에 충돌위험 없습니다

 

 

React Style📌

리액트에서 스타일링하는 방법은 인라인 스타일, 클래스CSS, CSS모듈, Sass

 

인라인 스타일

인라인 스타일은 기존 HTML의 인라인과 동일한 방식으로 작성합니다 요소에 스타일을 줄 땐 객체형태로 작성하여 함수를 넣어주거나 아니면 { 스타일:값 }으로도 가능합니다

function InlineStylefunc() {
  const buttonStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px',
    border: 'none',
    borderRadius: '5px',
  };

  return <button style={buttonStyle}>Click Me</button>;
}

 

 

클래스 CSS

클래스 CSS는 기존 HTML , CSS 작성법과 상당히 동일하지만 ID사용이 불가능하며 오직 className="값" 으로 사용가능합니다

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

import './styles.css';

function CssClass() {
  return <button className="button">Click Me</button>;
}

 

CSS모듈

CSS 모듈은 요소에 className을 {객체.classname } 으로 접근하는 방법인데요 이 방식 때문에 컴포넌트 단위로 따로 적용하기 때문에 css 충돌문제에 엄청난 이점이 있습니다 

/* button.module.css 파일 */
.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
}


//컴포넌트 파일

import styles from './Button.module.css';

function CssModuleExample() {
  return <button className={styles.button}>Click Me</button>;
}

이렇게 객체.classname 으로 접근하기 때문에 고유하게 적용할 수 있습니다

 

Sass

Sass는 변수, 중첩, 믹스인 등 CSS에서 다양한 기능들을 사용할 수 있도록 도와주는데요

반복문,  기존 어지러운 선택자들을 좀 더 수월하게 관리할 수 있는 문법을 사용합니다

 

 

Scss 적용방법

style.scss

$primary-color: blue; //변수 생성
$text-color: white; //변수 생성

.button {
  background-color: $primary-color; //변수사용
  color: $text-color;
  padding: 10px;
  border: none;
  border-radius: 5px;

 // 여기서 & 는 자기 자신 .button 을 가르키고있습니다
  &:hover {
    background-color: darken($primary-color, 10%); //변수사용
  }
}

 

 

app.js

import './styles.scss';

function App() {
  return <button className="button">Click Me</button>;
}

export default App;

 

이렇게 기존 방식과 똑같이 불러와 사용할 수 있습니다

 

중첩 구조 사용

리액트에선 복잡한 구조의 태그에 대해 구조적으로 보다 간결하고 구조적 파악이 쉽게 작성하도록 도와줍니다 

<nav>
<ul>
<li><a></a></li>
</ul>
</nav>

 

ul{
//스타일
}

ul > li{
//스타일
}

ul > li > a{
//스타일
}

 

nav {
	//nav 스타일

  ul {
  //ul 스타일
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
  //li 스타일
    display: inline-block;
  }

  a {
  
  //a 스타일
    text-decoration: none;
  }
}

 

이것만 봐도 굉장히 파악이 쉬워졌다는 걸 느끼 실수 있어요

 

 

믹스인

css를 재사용할 수 있습니다 스타일 앞에 @mixin 을 작성하면 공유가능한 스타일이 되는데 이 스타일을 다른 스타일 태그에서 @inClude 이름으로 불러와 재사용할 수 있습니다

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 100vh;
}

 

함수사용

Sass에선 css 내에서 함수를 사용할 수 있습니다

$base-color: #ff6600;

.button {
  background-color: $base-color;
  border: 1px solid lighten($base-color, 10%);
}

 

$map: (
  primary: #3498db,
  secondary: #2ecc71,
);

button {
  color: map-get($map, primary); // 출력: #3498db
}

 

 

 

React 19 Update ⭐

useTransition은 React의 동시성 기능으로, 덜 긴급한 작업의 우선순위를 낮추어 사용자 인터페이스의 응답성을 유지하는 데 사용됩니다. 성능 최적화가 필요한 애플리케이션에서 중요한 도구로 활용할 수 있습니다.

 

예시 작성 중...

 

useActionState는 비동기 처리에 관련된 모든 state를 말합니다 error, submitAction, ispending 호출 함수를 묶은 훅이라고 생각하면 되는데 기존에는 각각 따로 관리를 해야 했지만 19 버전으로 업데이트되면서 useActionState 에서 한 번에 관리할 수 있도록 업데이트되었습니다

 

예시 작성 중...

 

useOptimistic는 특정한 작업을 실행했을 때 제출상태, 성공했을 때 업데이트, 실패 시 롤백에 대한 작업을 효율적이게 할 수 있도록 만들어진 훅입니다 원래라면 각각 역할을 직접 구현해야 했지만 19 버전에선 새롭게 등장하였습니다 예시로 좋아요 및 구독버튼을 예로 들 수 있습니다

 

예시 작성 중...

 

useFormStatus는 사용자로부터 폼으로 데이터를 받는 작업을 좀 더 간편하게 하고자 만들어진 훅입니다  pending, data, method, actio 를 값을 받습니다 pending는 제출중일 때, data는 제출한 데이터, method 어떤 함수로 호출했는지, action은 제출메서드입니다 

 

예시 작성 중...