개발 일기

20251120 리액트 복습하고 정리(1) 본문

TIL

20251120 리액트 복습하고 정리(1)

종현종현 2025. 11. 20. 17:58

유레카에서 리액트를 전반적으로 공부하고 실습을 진행중인데 다시 한 번 리액트 복습의 필요성을 느끼게 되었다.

그래서 공부한 내용들을 정리해보려고 한다.

 

HTML에 CSS 스타일을 적용하는 방법

출처 : https://velog.io/@muz/HTML%EC%97%90-CSS-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

1. 인라인 스타일 (Inline Style)

  • 방법 : HTML 요소의 style 속성에 직접 CSS 코드를 작성한다.
  • 특징 : 해당 특정 요소에만 스타일이 적용되며, 다른 방법에 비해 가장 높은 우선순위를 가진다. 유지보수가 어렵고 코드가 혼재되어 일반적으로 권장되지는 않지만, 특정 부분의 작은 스타일 변경에 유용할 수 있다.
  • 예시
<p style="color: blue; font-size: 14px;">내용</p>

2. 내부 스타일 시트 (Internal Style Sheet)

  • 방법 : HTML 문서의 <head> 태그 내에 <style> 태그를 사용하여 CSS를 작성한다.
  • 특징 : 해당 HTML 문서 전체에 스타일을 적용할 수 있다. 별도의 CSS 파일을 만들 필요가 없어 단일 페이지 스타일링에 편리하지만, 여러 페이지에 동일한 스타일을 적용하려면 각 페이지에 코드를 복사해야 한다.
  • 예시
<head>
  <style>
    p { color: blue; }
  </style>
</head>

3. 외부 스타일 시트 (External Style Sheet)

  • 방법 : 별도의 .css 확장자를 가진 CSS 파일을 만들고, HTML 문서의 <head> 태그 내에 <link> 태그를 사용하여 연결한다.
  • 특징 : 가장 일반적으로 권장되는 방식이다. 여러 HTML 문서에서 하나의 CSS 파일을 공유할 수 있어 유지보수가 용이하고, 구조(HTML)와 디자인(CSS)이 명확하게 분리되어 코드 관리에 효율적이다.
  • 예시  (head 태그 안에 삽입)
<link rel="stylesheet" href="styles.css">

 

4. @import 방식 (Import Style)

  • 방법 : CSS 파일 내에서 @import 규칙을 사용하여 다른 CSS 파일을 불러온다.
  • 특징 : 외부 스타일 시트와 유사하게 외부 파일을 사용하지만, HTML이 아닌 CSS 파일 내에서 다른 CSS 파일을 참조할 때 사용된다. 웹 페이지 로딩 시 성능 문제로 인해 @link 방식이 더 선호되는 편이다.

이 방법들은 캐스케이딩(Cascading) 규칙에 따라 우선순위가 결정되며, 일반적으로 인라인 스타일의 우선순위가 가장 높다. 

js와 jsx 확장자 차이

JavaScript(JS)와 JSX(JavaScript XML)는 React 프로젝트에서 사용되는 두 가지 파일 형식이다.

JS 파일은 일반적인 JavaScript 코드를 포함하고 JSX 파일은 HTML과 JavaScript를 혼합하여 사용한다.

JSX 파일에는 JavaScript 코드가 포함되어 있지만, HTML 요소와 유사한 구문을 사용하여 React에서 UI를 구성하는 데 사용된다. 공식 문서에서 설명하기로는 JSX 파일은 UI 관련 작업을 할 때 권장되며, React에서 에러, 경고 메세지를 표시해준다고 한다.

JSX를 JS로 변환하는 과정

브라우저는 JSX를 이해하지 못한다. 따라서 작성된 JSX 코드를 JavaScript 코드로 변환하는 작업이 필요하다.

일반적으로 자바스크립트 컴파일러인 @babel을 통해 JavaScript로 변환되고, Babel은 JSX를 JavaScript로 변환하는 데 사용되는 가장 일반적인 도구이다.

 

리액트에서는 JSX를 JavaScript로 변환하기 때문에 JavaScript 문법을 사용하기 위해서는 따로 mark를 해줘야 한다.

따라서 JavaScript를 JSX 내부에서 사용할 때는 반드시 중괄호를 사용해야 한다.

const name = '류종현';
const hello = <h1>Hello, My name is {name}</h1>;

React 조건부 렌더링 하기

출처 : https://ibocon.tistory.com/217

1. 삼항연산자 사용하기

{isLogin ? <Dashboard /> : <Login />}
  • true → Dashboard
  • false → Login

가장 흔한 형태이고 가독성이 높다.

2. AND 연산자 (조건이 true일 때만 렌더링)

{isOpen && <Modal />}
  • isOpen이 true면 Modal이 보임
  • false면 아무것도 안 보여줌

조건이 true일 때만 보여주고 싶을 때 사용한다.

3. 변수에 담아서 렌더링하기

export default function Dev() {
  const [isLogin, setIsLogin] = useState(true);
 
  let message = <p>로그인 되었습니다.</p>;
 
  if (!message) {
    <p>로그인이 필요합니다.</p>;
  }
 
  return (
    <div>
      {message}
    </div>
  );
}

조건에 따라서 렌더링 할 변수를 담아서 렌더링 할 수 있다.

또한 JSX 구문이 좀 더 간단해지는 장점이 있다.

HTML 태그안에 class가 아닌 className 쓰기

자바스크립트에서 class는 예악어(클래스 정의)라서, 만약 class를 속성 이름으로 쓰면 충돌이 발생할 수 있다.

그래서 JSX 속성으로 className을 만들었다.

props와 childeren

출처 : https://velog.io/@hyeroneey/props.children-%EC%9D%B4%EB%9E%80

props

props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터다. 

const Parent = () => {
  return <Child title="Hello" />;
};

const Child = ({ title }) => {
  return <h1>{title}</h1>;
};

 

  • Parent가 준 title을 Child에서 받아서 렌더링
  • Child는 실제로 무엇을 받을지 모르는 "재사용 가능한 박스"가 됨
  • props는 object literal 형태 - {key: "value"} 데이터 형태

children

children은 컴포넌트 태그 사이에 들어있는 모든 내용을 의미한다. 기존 props와 달리 부모 컴포넌트에서 호출하는 자식 컴포넌트 태그 사이에 전달할 데이터를 입력하는 방법이 props Children이다. props와 다른 점은 key값이 children으로 지정된다는 것이다.

const Card = ({ children }) => {
  return <div className="card">{children}</div>;
};

const App = () => {
  return (
    <Card>
      <h2>제목</h2>
      <p>내용입니다.</p>
    </Card>
  );
};

props vs children 언제 사용할까?

props를 쓰는 경우

  • 컴포넌트에 값을 전달하고 싶을 때
  • 버튼에 text, color, onClick 전달처럼

children을 쓰는 경우

  • 이 자리에 다른 컴포넌트를 꽂아 넣고 싶을 때
  • 레이아웃, 카드, 모달처럼 중간에 들어갈 내용이 바뀌는 UI

리액트 ref 

ref란?

리액트에서 ref는 컴포넌트 안에서 특정 DOM 요소나 값에 직접 접근하기 위한 수단이다.

보통 상태(state) 기반으로 UI를 업데이트하지만, ref는 리액트의 렌더링 사이클을 거치지 않고 직접적으로 무언가를 참조할 수 있게 해주는 도구다.

ref의 핵심 역할

1. 실제 DOM 요소 직접 접근

리액트는 Virtual DOM 기반이라 DOM에 직접 접근을 잘 안 시켜주지만 가끔 필요할 때가 있다.

예) input에 포커스 주기

const inputRef = useRef();

<input ref={inputRef} />

// 버튼 클릭 시 포커스
inputRef.current.focus();

즉, DOM 노드 직접 조작이 필요할 때 ref 사용

2. 렌더링과 상관없는 값 저장

state는 값이 바뀌면 리렌더링이 발생하지만 ref는 값이 바뀌어도 리렌더링이 절대 발생하지 않는다.

유용한 상황은 다음과 같다.

  • 이전 값 저장
  • 특정 변수의 현재값 추적
  • 타이머 ID 저장
  • 스크롤 위치 저장 등

3. 컴포넌트 인스턴스 접근

부모가 자식 컴포넌트의 내부 메서드를 직접 호출해야 할 때 사용한다.

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    sayHi() {
      console.log("Hi!");
    }
  }));
});

// 부모에서
childRef.current.sayHi();

정리

ref는 렌더링과 무관하게 DOM 또는 값을 직접 제어하는 도구이다.

리액트 HOOKS

useState - 컴포넌트의 상태 관리

  • 가장 기본적인 상태(state) 관리 훅
  • 값이 변경되면 리렌더링 발생
  • UI와 직접적으로 연결된 값 저장

언제 사용?

  • 입력 값, 토글 상태, 리스트 등 화면에 영향을 주는 데이터

useReducer - 복잡한 상태 로직 관리

  • useState보다 더 복잡한 상태 업데이트 로직이 필요할 때 사용
  • state + action 구조로 reducer 패턴사용
  • 여러 상태 값이 엮여 있을 때 깔끔하게 관리 가능

언제 사용?

  • 상태 종류가 여러 개이고 업데이트 규칙이 복잡한 경우
  • 예: todo 리스트, 폼 여러 값 관리, 상태가 여러 단계로 변하는 경우

useMemo - 계산된 값을 메모이제이션

  • 값을 기억하는 훅
  • 고비용 연산(정렬, 필터, 계산)을 매번 실행하지 않도록 성능 최적화
  • 의존성 배열이 바뀌지 않는 한 기존 계산값 재사용

언제 사용?

  • 연산 비용이 큰 계산을 반복적으로 할 때
  • state 변경이 많아도 계산을 최소화하고 싶을 때

useCallback - 함수를 메모이제이션

  • 함수를 기억하는 훅
  • 함수가 매 렌더마다 새로 만들어지는 것을 방지
  • 특히 자식 컴포넌트에 callback 전달할 때 중요

언제 사용?

  • props로 함수를 넘기는데, 불필요한 렌더링을 막고 싶을 때
  • 메모이제이션된 컴포넌트(React.Memo)와 함께 사용

useEffect - 사이드 이펙트 처리

  • 렌더링 이후 실행해야 하는 작업 처리
  • React가 관리하지 않는 외부 세계와 상호작용할 때 사용

언제 사용?

  • 데이터 fetch
  • 이벤트(스크롤, 키보드) 등록/해제
  • 로컬스토리지 읽기/쓰기
  • external 라이브러리 초기화

리액트 불변성

위의 immer는 불변성(immutability)을 더 쉽게 유지할 수 있도록 도와주는 라이브러리이다.

React는 상태(state)를 직접 수정하면 안 되고, 새로운 객체를 만들어서 업데이트해야 한다.

직접 바꾸면 안되는 이유는 리액트가 state가 변경되었는지 판단할 때 얕은 비교를 사용하기 때문이다.

객체 내부의 값까지 깊게 비교하지 않고 "리렌더링을 할지 말지를 객체의 참조가 바뀌었는가?"로 판단한다.

 

리액트에서 배열이나 객체를 업데이트해야 할 때에는 스프레드 연산자를 사용해서 새로운 객체를 만들어주어야 하고 배열은 push, splice 등의 함수를 사용하거나 n번째 항목을 직접 수정하면 안되고 concat, filter, map 등의 함수를 사용해야 한다.

 

 

느낀 점

리액트를 공부하면 할수록 공부해야될 것이 많다고 느끼게 된다. 어디까지 이해하고 넘어가야할 지를 잘 정하면서 다음 내용을 공부해야할 것 같다. 그래도 정리를 해보니 좀 더 감은 잡히는 것 같다.

저작자표시 (새창열림)

'TIL' 카테고리의 다른 글

20251215 깃브랜치협업  (0) 2025.12.15
20251202 웹시큐리티  (0) 2025.12.02
20251118 Axios는 뭘까?  (0) 2025.11.18
20251110 SPA, MPA, CSR, SSR의 차이  (1) 2025.11.11
20251105 리액트 수업  (1) 2025.11.05
'TIL' Related Articles more
Comments