상세 컨텐츠

본문 제목

[React.js]5장.리액트의 기본 기능 다루기

25-26/React.js

by popuri1216 2025. 11. 7. 10:00

본문

728x90

 

5장. 리액트 기본 기능 다루기

1. 컴포넌트

 

개발자들은 리액트를 컴포넌트 기반의 UI 라이브러리(Component-Based UI Library) 라고 소개합니다.

- 페이지의 모든 요소를 컴포넌트 단위로 쪼개어 개발하고, 완성된 컴포넌트를 마치 레고 조립하듯이 하나로 합쳐 페이지를 구성

- 리액트에서의  웹 서비스 개발 = 컴포넌트들의 조합

2. JSX

JSX : 자바스크립트 XML

- 자바스크립트와 HTML 태그를 섞어 사용하는 문법으로 자바스크립트의 확장 문법

 

- 공식 문법은 아니지만 리액트 개발팀이 권장할 정도, 대다수의 개발자들이 사용
<div>
	<h1>body</h1>
	<h2>{number}</h2>  // 자바스크립트 표현식 {number}
      </div>
    );
}
Export default Body;

 

JSX와 자바스크립트 표현식은 세가지로 정리할 수 있습니다.

- 산술 표현식 : 숫자로 표현되는 식

Ex) numA + numB

- 문자열 표현식 : 문자열 또는 문자열로 평가되는 식

Ex) strA + strB

- 논리 표현식 : 참이나 거짓으로 평가되는 식

Ex) boolA || boolB

 

여기서 주의해야할 점으로는 JSX는 숫자,문자열,불리언,null,undefined 를 제외한 값을 사용하면 오류가 발생합니다. 또한, JSX 문법에서 지켜야할 것으로는 두가지가 있습니다.

- 닫힘 규칙: 모든 태그는 여는 태그가 있으면 닫는 태그 필요
- 최상위 태그 규칙 : 모든 태그는 반드시 최상위 태그로 감싸기

 

src/component/Body.js

1  import React from "react";
2  
3  function Body() {
4    return (
5      <React.Fragment>
6        <div>div 1</div>
7        <div>div 2</div>
8      </React.Fragment>
9    );
10 }
11 
12 export default Body;

 

JSX 스타일링은 두가지로 나뉩니다.

- 인라인 스타일링 : JSX 문법 중 하나로 HTML의 style 속성을 사용해 직접 스타일을 정의하는 방법

Ex) backgroundColor:”red”;

- 스타일 파일 분리 : HTML에서는 CSS 파일을 따로 작성한 후 <link rel = ‘stylesheet’, href=‘css 파일 경로‘> 형식으로 불러와 사용.

 

 

3. 컴포넌트에 값 전달하기

Props: 부모가 자식 컴포넌트에 단일 객체 형태로 값을 전달할때 객체를 이르는말입니다.
- 컴포넌트의 공통 기능이 아닌, 세부 기능을 표현할 때 사용.
- 부모만이 자식 컴포넌트에 전달 가능하기 때문에 역은 성립하지 않음.
- 읽기전용 (Read-Only)으로 전달되면 절대 수정 불가.
 

샌드위치에 비유하자면 샌드위치의 빵은 component, 내용물은 props가 됩니다.

 

src/App.js

1  (...)
2
3  function App() {
4    const name = "이정환";
5    return (
6      <div className="App">
7        <Header />
8        <Body name={name} />
9        <Footer />
10     </div>
11   );
12 }
13
14 export default App;

 

src/component/Body.js

1  function Body(props) {
2    console.log(props);
3    return <div className="body">{props.name}</div>;
4  }
5  export default Body;

이 밖에도 여러 개의 값 전달하기, 구조분해할당으로 값 전달하기가 있습니다.

 

4. 이벤트 처리하기

이벤트는 웹 페이지에서 일어나는 사용자의 행위를 말합니다.

ex) 버튼 클릭, 페이지 스크롤, 새로고침 등

 

이벤트 핸들링은 이벤트가 발생하면 특정 코드가 동작하도록 만드는 작업입니다.

 ex) 버튼을 클릭했을 때 경고 대화상자를 브라우저에 표시하는 동작 등

 

<script>
  function handleOnClick() {
    alert("button clicked!");
  }
</script>

<button onclick="handleOnClick()">
  Click Me!
</button>

 

위 코드는 페이지의 버튼을 클릭하는 이벤트가 발생하면, 함수 handleOnClick을 실행해 경고 대화상자를 페이지에 표시하는 것으로, 함수 handleOnClick가 이벤트를 처리하는 함수이기에 이벤트 핸들러에 해당합니다.

 

5. 컴포넌트와 상태

State는 상태라는 뜻으로 변동에 따라 값이 변하는 동적인 컴포넌트를 만들 때 사용합니다. 여태까지의 컴포넌트들은 모두 정적인 컴포넌트에 해당합니다.  이는 전구의 상태인 소등과 점등에 비유할 수 있습니다.  소등 상태일 때 스위치를 켜면 ‘점등’이 되고 점등 상태일 때 스위치를 끄면 ‘소등’이 되는 것이 state와 비슷합니다.

 

State의 기본 사용법은 아래와 같습니다.

const [light, setLight] = useState('off');
// State 변수  set 함수  생성자(초깃값)

 

첫 번째 요소 ‘light’는 현재 상태의 값을 저장하고 있는 변수로 ‘State 변수’에 해당합니다. 두 번째 요소인 setLight는  State 변수의 값을 변경하는 함수로, ‘set 함수’라고 부릅니다. useState를 호출할 때 인수로 값을 전달하면  초깃값이 됨. 위 코드에서는 ‘off’를 전달했으므로 State 변수 light의 초깃값은 off가 됩니다.

 

Set 함수로 state 값 변경하는 코드는 아래와 같습니다.

import { useState } from "react";

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

  const onIncrease = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
    </div>
  );
}

export default Body;

 

버튼을 하나 만들고, 버튼을 클릭할 때마다 State(count) 값 을 1씩  증가시킵니다. 이벤트 핸들러인 onIncrease에서는 set 함수

인 setCount를 호출하고,인수로 count에 1 더한 값을 전달합니다.<+> 버튼을 클릭하면 onIncrease 이벤트 핸들러 onIncrease는 setCount를 호출하고, 인수로 현재의 count 값에 1 더한 값을 전달하게 되어,그 결과 State(count) 값은 1 증가합니다.

 

 

State로 사용자의 입력을 관리할 수 있습니다.

- <input> 태그로 텍스트 입력하기

ex) 텍스트, 전화번호,날짜,체크박스 등 여러 형식의 정보를 입력할 수 있는 input 태그가 만드는 폼.

import { useState } from "react";

function Body() {
  const handleOnChange = (e) => {
    console.log(e.target.value);
  };
  return (
    <div>
      <input onChange={handleOnChange} />
    </div>
  );
}

export default Body;

 

입력 폼에서 이벤트 핸들러 함수 handleOnChange 생성합니다.  이 함수는 이벤트 객체를 매개변수로 저장해 사용자가 폼에 입력한 값(e.target.value)을 콘솔에 출력하게 됩니다. <input> 태그로 텍스트를 입력할 폼을 만들고, 이 폼의 onChange 이벤트 핸들러로 handleOnChange를 설정하면 사용자가 입력 폼에서 텍스트를 입력하면 이벤트가 발생합니다.

 

이 밖에도, 날짜와 드롭다운 옵션을 이용해 하나의 옵션 선택, 글상자로 여러 줄의 텍스트 입력, 여러 개의 사용자 입력을 관리할 수 있습니다.

 

+) props 와 state

동적으로 변하는 값인 리액트의 State 역시 일종의 값이므로 Props로 전달할 수 있습니다. 자식 컴포넌트는 Props로 전달된 State 값이 변하면 자신도 리렌더되게 됩니다.

6. Ref

Ref(Ref-erence): 참조라는 뜻으로, Dom요소들을 직접 조작 가능합니다.

 

import { useState } from "react";

function Body() {
  const [text, setText] = useState("");

  const handleOnChange = (e) => {
    setText(e.target.value);
  };

  const handleOnClick = () => {
    alert(text);
  };

  return (
    <div>
      <input value={text} onChange={handleOnChange} />
      <button onClick={handleOnClick}>작성 완료</button>
    </div>
  );
}

 

State 변수 text로 텍스트 입력 폼과 버튼을 생성한 후, 버튼을 클릭합니다. 이벤트 핸들러 handleOnClick이 실행되어 입력 폼에서 작성한 텍스트가 메시지 대화상자에 표시됩니다. 텍스트 입력 폼에 ‘안녕 리액트’라고 입력한 다음, <작 성 완료> 버튼을 클릭하면 됩니다.

useRef를 이용해서 입력폼을 초기화할 수도 있습니다. 웹 서비스의 로그인 페이지는 대부분 사용자가 ID와 패스워드를 입력하고, 로그인 버튼을 클릭하면 패스워드가 올바른지 점검한 후 패스워드 입력 폼에서 작성한 값을 초기화할 때 사용합니다. 또한, 웹 서비스에서는 사용자가 특정 폼에 내용을 입력하지 않거나 내용이 정한 길이보다 짧으면 해당 폼을 포커스(focus)하여 사용자의 추가 입력을 유도합니다. 이때 리액트의 Ref 기능을 이용하면 특정 요소에 포커스 기능을 지정할 수 있습니다.
728x90

'25-26 > React.js' 카테고리의 다른 글

[React.js] 리액트를 다루는 기술-8장.hooks  (0) 2025.11.21
[React.js] project 1[카운터] 앱 만들기 ~ 6장. 라이프 사이클과 리액트 개발자 도구  (0) 2025.11.14
[React.js]3장. Node.js ~ 4장. 리액트 시작하기  (0) 2025.10.28
[React.js]2장. 자바스크립트의 실전-구조 분해 할당 ~ 2장. 자바스크립트 실전 - 비동기 처리  (1) 2025.10.10
[React.js]1장. 자바스크립트의 기초 ~ 2장. 자바스크립트 실전 - 반복문 응용하기  (0) 2025.10.03

관련글 더보기

티스토리툴바