React Native

🥇 리액트 기본기 (반드시 알아야 할 핵심)

안스 인민군 2025. 6. 20. 16:43

1. JSX

JSX는 JavaScript XML의 약자로, JavaScript 안에 HTML을 작성할 수 있는 문법입니다.
JSX 덕분에 UI 구조를 선언형으로 표현할 수 있어, 코드의 가독성이 좋아집니다.

const name = '개발자';
return <h1>Hello, {name}!</h1>;

위 코드는 문자열 변수 name을 HTML 구조 내에서 바로 사용할 수 있게 해줍니다.

2. 컴포넌트

컴포넌트는 UI의 독립적인 단위입니다. 리액트는 컴포넌트를 조립해서 화면을 구성합니다.
보통 함수형으로 작성되며, 각 컴포넌트는 자신만의 props와 state를 가질 수 있습니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

이처럼 함수 하나가 하나의 화면 조각(UI)를 구성합니다.

3. Props

props는 부모 컴포넌트가 자식에게 데이터를 전달하는 방법입니다.
읽기 전용이며, 자식 컴포넌트는 props를 받아 표현만 합니다.

<Welcome name="개발자" />

name="개발자"는 Welcome 컴포넌트 내부에서 props.name으로 사용됩니다.

4. State

state는 컴포넌트 내부에서 관리하는 동적인 값입니다.
값이 바뀌면 컴포넌트가 자동으로 다시 렌더링됩니다.

그러나 State가 바뀌면 해당 컴포넌트와 그 아래 자식 컴포넌트만 다시 렌더링되며, 상위 컴포넌트는 영향을 받지 않습니다.

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

count는 현재 상태, setCount는 상태를 바꾸는 함수입니다.

5. Event Handling

리액트에서는 이벤트 핸들러를 JSX 속성으로 전달합니다.
예를 들어 클릭, 입력 등의 이벤트를 처리할 수 있습니다.

<button onClick={() => alert('클릭됨!')}>Click me</button>

이벤트 이름은 camelCase(onClick)로 작성해야 합니다.

6. Conditional Rendering

조건에 따라 컴포넌트를 다르게 보여주고 싶을 때 사용하는 문법입니다.
if, &&, ? : 등의 방식으로 구현합니다.

{isLoggedIn ? <Dashboard /> : <Login />}
 

로그인 여부에 따라 다른 컴포넌트를 보여주는 예입니다.

7. List Rendering

배열 데이터를 .map()을 사용해 여러 UI 요소로 변환할 수 있습니다.

const items = ['사과', '바나나', '포도'];
return (
  <ul>
    {items.map(item => <li key={item}>{item}</li>)}
  </ul>
);

.map()을 사용하면 반복적인 요소도 손쉽게 렌더링할 수 있습니다.

8. Key Prop

리액트에서 리스트를 렌더링할 때 각 항목을 고유하게 식별하기 위해 사용하는 특수한 prop입니다.

{items.map(item => <li key={item.id}>{item.name}</li>)}

🤔 왜 key가 필요할까?

리액트는 상태 변화가 생기면 가상 DOM(Virtual DOM) 을 사용해 변경점을 찾아내고, 실제 DOM을 업데이트합니다.

이때 key가 없다면 React는 "어떤 항목이 변경/삭제/추가됐는지 정확히 알 수 없기 때문에", 전체 리스트를 다시 그리거나 잘못된 요소를 업데이트할 수 있습니다.

key는 React가 각 항목의 정체성을 기억하는 도구예요.

⚙️ 작동 방식

리스트 요소에 key를 주면 리액트는:

  1. 이전 렌더링의 리스트를 기억
  2. 새 렌더링의 리스트와 비교
  3. 각 key를 기준으로 어떤 요소가:
    • 변경되었는지
    • 새로 추가되었는지
    • 삭제되었는지를 판단함

이 덕분에 DOM 조작을 최소한으로 줄여 성능을 확보합니다.

❌ 잘못된 key 사용 예

items.map((item, index) => (
  <li key={index}>{item.name}</li>
));

index는 배열 순서가 바뀌거나 아이템이 추가/삭제되었을 때 문제가 발생합니다.

  • 사용자 입력 같은 동적인 리스트에는 절대 index를 key로 쓰지 마세요.

✅ 올바른 key 사용 예

items.map(item => (
  <li key={item.id}>{item.name}</li>
));

id, uuid 같은 진짜 고유값을 사용하는 것이 이상적입니다.

🔁 예제: key가 없을 때 vs 있을 때

예: key가 없는 경우

const items = ['🍎', '🍌', '🍇'];
// 새 항목을 앞에 추가하면 React는 순서만 보고 재사용하다가 오류 발생 가능

예: key를 명확히 줄 경우

const items = [
  { id: 'a1', fruit: '🍎' },
  { id: 'b2', fruit: '🍌' },
  { id: 'c3', fruit: '🍇' },
];

items.map(item => (
  <li key={item.id}>{item.fruit}</li>
));

9. useState

useState는 리액트에서 상태값을 선언하고 관리하는 가장 기본적인 훅(Hook)입니다.

const [value, setValue] = useState('초기값');
  • value: 현재 상태 값
  • setValue: 상태 변경 함수

useState로 선언한 값은 변할 수 있고, 값이 바뀌면 컴포넌트는 다시 렌더링됩니다.

저작자표시 (새창열림)