🔍 React.js 입문

김수진·2025년 7월 5일

React 강의

한 입 크기로 잘라 먹는 리액트 섹션 6 - React.js 입문

React 실습 준비

파일 만들기

npm create vite@latest
Project name:
Select a framework: React

파일 들어가기

npm install
npm run dev

필요없는 코드 삭제하기

import reactLogo from './assets/react.svg'
import voteLogo from '/vite.svg'

src의 App.jsx에서 삭제

src App.css 기본 스타일 값 모두 삭제하기

eslint 플러그인

우리가 작성한 코드를 정적으로 검사해서 오류가 발생할 만한 코드가 있으면 경고를 띄워주는 프로그램

파일을 들어가보면 enslint 파일이 생겼음을 확인할 수 있다.

React 컴포넌트

컴포넌트: html을 반환하는 함수
주의점: 컴포넌트를 생성하는 함수의 이름은 반드시 첫 글자가 대문자가 되어야 한다.

const Header = () => {
	return(
    	<header>
        	<h1>header</h1>  // 자식 컴포넌트
        <header>
    };
};

fucntion App() {
	return (
		<>
        	<Header />  // Header 출력 코드
            <h1> 안녕 리액트!!</h1>  // 부모 컴포넌트
        </>
    };
}

예제에서 App 컴포넌트는 root component이다!

자식 컴포넌트를 부모 컴포넌트에서 import 해보자

const Header = () => {
	return(
    	<header>
        	<h1>header</h1>  // 자식 컴포넌트
        <header>
    };
};

export default Header; //추가하기

Header.jsx 파일을 만들어서

import "./App.css";
import Header from "./components/Header.jsx"; //추가하기(.jsx는 생략 가능)

fucntion App() {
	return (
		<>
        	<Header />  
            <h1> 안녕 리액트!!</h1>  // 부모 컴포넌트
        </>
    };
}

export default App;

App.jsx 파일에서 import를 하는 방법도 가능하다.

JSX - UI 표현하기

const Main = () => {
	const number = 10;
    
	return(
    	<main>
        	<h1>main</h1> 
            <h2>{number}</h2> //{} 중괄호 안에 출력하고 싶은거 작성
        </main>
    };
};

jsx 문법에서 javascript 값을 html에 랜더링 하고 싶다면 {} 중괄호 안에 출력하고 싶은거 작성
삼항연산자(number % 2 ===0 ? "짝수" : "홀수")도 {}안에 넣어서 출력 가능하다.

JSX 주의 사항

중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다.
숫자 & 문자열 & 배열만 렌더링 가능하다.
객체 랜더링 불가능하다.
모든 태그는 닫혀있어야 한다.

<img>
</img>

최상위 태그는 반드시 하나여야 한다.

JSX 문법에서 메인 컴포넌트가 조건에 따라 각각 다른 UI를 랜더링하는 방법

삼항 연산자 이용

const Main = () =>{
	const user = {
    	name:"김수진"
        isLogin: false,
    };
	return {
    	<>
        	{user.isLogin ? {
            	<div>로그아웃</div>
            } : {
            	<div>로그인</div>
            }}
    	</>;
    };
};

조건문 이용

const Main = () =>{
	const user = {
    	name:"김수진"
        isLogin: false,
    };
    
if (user.isLogin) {
	return <div>로그아웃</div>;
} else {
	return <div>로그인</div>;
}

JSX에서 스타일 적용 방법

카멜케이스: 연결되는 첫번째 글자를 대문자로 표기하는 방법

backgroundColor:"red"

따로 파일을 만들 경우

.logout{
	background-color: red;
    .
    .
    .
}

main.css파일에 main.jsx 에서 `import "./Main.css";를 한 후, div에서
으로 불러와주면 적용이 된다.

Props로 데이터 전달하기

props란?
컴포넌트에 전달된 값

<Button text={"메일"} img={"mail.png"} /> //text={"메일"} img={"mail.png"} 이 부분이 props다.

import Button from "./components/Button";

function App() {
	return (
		<>
			<Button text={"메일"}/>
			<Button text={"카페"}/>
			<Button text={"블로그"}/>
		</>
	);
}

App.jsx에서 Button 컴포넌트를 import 해준다.

const Button = (props)=> {
	console.log(props);
		return <button>클릭</button>
};

Button.jsx에 props를 작성해주면 출력이 가능하다.

props 디폴트 값 설정

props의 구조분해할당 방법을 이용해줘야한다.

const Button = ({ text, color = "black"}) => {
	return {
		<button style = {{color: color}}>
			{text}-{color.toUpperCase()}
		</button>
	};
};

스프레드 연산자 (속성을 객체 형태로 옮기고 싶을 때)

import Button from "./components/Button";

function App() {
  const buttonProps = {
    text :"메일",
    color: "red", 
    a: 1,
    b: 2,
    c: 3, 
  };
  
  return (
      <>
          <Button {...buttonProps}/> //중요
          <Button text={"카페"}/>
          <Button text={"블로그"}/>
      </>
  );
}

속성이 많은 경우 객체로 옮기면 편리하다.

children props

html react 컴포넌트도 전달 가능하다.

  return (
      <>
          <Button {...buttonProps}/> 
          <Button text={"카페"}/>
          <Button text={"블로그"}/>
          	<div>자식요소 </div>
          </Button>
      </>
  );
}

App.jsx 파일에 div태그를 배치시키다.

const Button = ({children, text, color = "black"}) => {
	return {
		<button style = {{color: color}}>
			{text}-{color.toUpperCase()}
            {children}
		</button>
	};
};

Button.jsx 에서 children 작성하기

이벤트 처리하기

Event Handling: 웹 내부에서 발생하는 사용자의 행동을 처리히는 것

const Button = ({children, text, color = "black"}) => {
	const onClickButton = () => {
    	console.log(text);
    };
    
	return {
		<button 
          onClick = {onClickButton}
          style = {{color: color}}
        >
			{text}-{color.toUpperCase()}
            {children}
		</button>
	};
};

버튼을 누르면 어떠한 사건이 발생되도록 실행시켜주는 코드이다.

이벤트 객체

합성 이벤트 객체

모든 웹 브라우저의 이벤트 객체를 하나로 통일힌 형태

const Button = ({children, text, color = "black"}) => {
	const onClickButton = (e) => {
    	console.log(e);  //SyntheticBaseEvent 모든 정보가 담겨져 있다.
    	console.log(text);
    };
    
	return {
		<button 
          onClick = {onClickButton}
          style = {{color: color}}
        >
			{text}-{color.toUpperCase()}
            {children}
		</button>
	};
};

State로 상태관리하기

State 란?
현재 가지고 있는 형태나 모양을 뜻한다.
변화할 수 있는 동적인 값이다.

import "./App.css";
import {useState} from "react";

function App() {
  const [state, setState] = useState(0); //state값, setState: state를 변화시키는 

  return 
  	<>
  		<h1>{state}</h1>
  	</>;
  };
}

Re-Render / Re-Rendering: state가 바뀌면서 컴퍼넌트가 다시 렌더링 되는 상황

import "./App.css";
import {useState} from "react";

function App() {
  const [state, setState] = useState(0); 

  return //state가 return문을 통해 리렌더링 됨
  	<>
  		<h1>{state}</h1>
        <button 
        	onCLick ={() => {
				setState(state + 1); 
            }}
         >
         + 
         </button>
  	</>;
  };
}

state가 return문을 통해 리렌더링 된다.

끄기 켜기 기능 구현

import "./App.css";
import {useState} from "react";

function App() {
  const [state, setCount] = useState(0); 
  const [light, setLight] = useState("OFF");

  return {
  	<>
    <div>
        <h1>{light}</h1>
        <button
            onClick={() => {
                setLight(light === "ON" ? "OFF" : "ON");
            }}
     >
            {{light === "ON" ? "끄기" : "켜기"}
         </button>
      </div>
      <div>
         <h1>{count}</h1>
         <button
            onCLick = {() => {
                setCount(count + 1);
             }}
         >
            +
         </button>
  	</>;
  };
}

State와 Props

state를 props를 이용해서 자식 컴포넌트에 전달하는 방법
자식 컴포넌트는 부모로부터 받는 props의 값이 바뀌면 리렌더링이 발생한다.
react 컴포넌트는 자신이 갖고 있는 state가 변경되지 않아도 부모로부터 받는 props 값이 변경되면 re-rendering이 된다.

react 컴포넌트가 re-rendering 되는 상황
1. 자식이 관리하는 state의 값이 변경될 때이다.
2. 자식이 제공받는 props의 값이 변경될 때이다.
3. 부모 컴포넌트가 re-rendering이 되면 자식 컴포넌트도 re-rendering 된다.

자식 컴포넌트가 많아지면 관리가 어렵고 성능이 저하된다.
=> 따라서 관련 없는 두개의 state를 하나의 컴포넌트 몰아넣기보다 다른 컴포넌트로 분리하는 것이 좋다.

function App(){
  const [count, setCount] = useState(0);
  const [light, setLight] = useState("OFF");

자식 컴포넌트가 많아지면 이상한 코드가 re-rendering 될 수도 있다.

const Counter ()=>{
  const [count, setCount] = useState(0);
  return 문
  .
  .
  .
}
const Bulb = () => {
  const [light, setLight] = useState("OFF");
  
  return 문
  .
  .
  .

다른 컴포넌트로 분리한 코드이다.

State로 사용자 입력 관리하기 1

간단한 회원가입 폼
1. 이름
2. 생년월일
3. 국적
4. 자기소개

const Register = () => {
	const [name, setName] = useState("이름");
    const [birth, setBirth] = useState("");
    const [country, setCountry] = useState("");
    const [bio, setBio] = useState("");

	const onChangeName = (e) => {
		setName(e.target.value);
	};
	const onChangeBirth = (e) => {
    	setBirth(e.target.value);
    };
    const onChangeCountry = (e) => {
    	setCountry(e.target.value);
    };
    const onChangeBio = (e) => {
    	setBio(e.target.value);
    };
    
    
	return {
		<div>
			<input 
              value={name} // 이름 관리하기
              onChange={onChangeName}
			  placeholder={"이름"}
             />
		</div>
        
        <div>
        	<input
              value={input.birth} // 생일 관리하기
              onChange={onChangeBirth}
			  type: "date"
        
        <div>
        	<select value = {country} onChange={onChangeCountry}> //국적
            	<option></option>
                <option>한국</option> 
                <option>미국</option>
                <option>영국</option>
            </select>
            {country}
        </div>
        
        <div>
        	<textarea value={bio} onChange={onChangeBio} />
            {bio}
        </div>
     </div>   
	);
};

State로 사용자 입력 관리하기 2

const Register = () => {
    const [input, setInput] = useState({
    	name = "", 
        birth = "", 
        country = "", 
        bio = "", 

	const onChangeName = (e) => {
		setInput({
        	...input,
            name : e.target.value
        })
	};
	const onChangeBirth = (e) => {
		setInput({
        	...input,
            birth : e.target.value
        })
	};
    const onChangeCountry = (e) => {
		setInput({
        	...input,
            country : e.target.value
        })
	};
    const onChangeBio = (e) => {
		setInput({
        	...input,
            bio: e.target.value
        })
	};
    
    
	return (
		<div>
			<input 
              value={input.name} // 이름 관리하기
              onChange={onChangeName}
			  placeholder = {"이름"}
             />
		</div>
        
        <div>
        	<input
              value={input.birth} // 생일 관리하기
              onChange={onChangeBirth}
			  placeholder = {"생일"}
             />
		</div>
            
        
        <div>
        	<select value = {input.country} onChange={onChangeCountry}> //국적
            	<option></option>
                <option>한국</option> 
                <option>미국</option>
                <option>영국</option>
            </select>
            {country}
        </div>
        
        <div>
        	<textarea value={input.bio} onChange={onChangeBio} />
            {bio}
        </div>
     </div>   
	);
};

...input spread연산자를 사용하는 이유?
관련없는 프로퍼티값을 유지시키기 위해

하나의 프로퍼티값만 바뀌게 할 수 있다는 것이 핵심이다.

통합이벤트핸들러

const Register = () => {
    const [input, setInput] = useState({
    	name = "", 
        birth = "", 
        country = "", 
        bio = "", 

	const onChangeName = (e) => {
		setInput({
        	...input,
            [e.target.name] : e.target.value
        });
	};
        
	return (
		<div>
			<input 
              value={input.name} 
              onChange={onChange} //바뀐부분!
			  placeholder = {"이름"}
             />
		</div>
        
        <div>
        	<input
              value={input.birth} 
              onChange={onChange} //바뀐부분!
			  type: "date"
             />
		</div>
            
        
        <div>
        	<select value = {input.country} onChange={onChange}> //바뀐부분!
            	<option></option>
                <option>한국</option> 
                <option>미국</option>
                <option>영국</option>
            </select>
            {country}
        </div>
        
        <div>
        	<textarea value={input.bio} onChange={onChange} /> //바뀐부분!
            {bio}
        </div>
     </div>   
	);
};

input, select 등 모든 trxtarea의 onChange라는 통합이벤트를 설치해두었다.

useRef로 컴포넌트의 변수 생성하기

useRef란? 새로운 Reference 객체를 생성하는 기능이다.

const refObject = useRef()

refObject 는 컴포넌트 내부의 변수이다.

useRef vs useState

useRef :
reference 객체를 생성한다.
컴포넌트 내부의 변수로 활용 가능하다.
어떤 경우에도 리렌더링을 유발하지 않는다.
useState:
State를 생성한다.
컴포넌트 내부의 변수로 활용 가능하다.
값이 변경되면 컴포넌트를 리렌더링한다.

import {useState, useRef} from "react";

const Register = () => {
    const [input, setInput] = useState({
    	name = "", 
        birth = "", 
        country = "", 
        bio = "", 
    const refObj = useRef(); // 새로운 레퍼런스 객체 생성
	console.log("Register 렌더링"); // 리렌더링하지 않는다. 
    
	const onChangeName = (e) => {
		setInput({
        	...input,
            [e.target.name] : e.target.value
        });
	};

        
	return (
    	<div>
        	<button
            	onCLick = {() => {
                	refObj.current++;
                    console.log(refObj.current());
                }}
            >
            	ref +1 
            </button>
            
		<div>
			<input 
              value={input.name} 
              onChange={onChange} 
			  placeholder = {"이름"}
             />
		</div>
        
        <div>
        	<input
              value={input.birth} 
              onChange={onChange} 
			  type: "date"
             />
		</div>
            
        
        <div>
        	<select value = {input.country} onChange={onChange}> 
            	<option></option>
                <option>한국</option> 
                <option>미국</option>
                <option>영국</option>
            </select>
            {country}
        </div>
        
        <div>
        	<textarea value={input.bio} onChange={onChange} /> 
            {bio}
        </div>
     </div>   
	);
};

useRef는 리렌더링하지 않는다.

레퍼런스 객체 활용 사례 1

import {useState, useRef} from "react";

const Register = () => {
    const [input, setInput] = useState({
    	name = "", 
        birth = "", 
        country = "", 
        bio = "", 
    const countRef = useRef(); 
    console.log("Register 렌더링");
    
	const onChangeName = (e) => {
		countRef.current ++;
        console.log(countRef.current);
        setInput({
        	...input,
            [e.target.name] : e.target.value
        });
	};
   
        
	return (
     <div>
		<div>
			<input 
              value={input.name} 
              onChange={onChange} 
			  placeholder = {"이름"}
             />
		</div>
        
        <div>
        	<input
              value={input.birth} 
              onChange={onChange} 
			  type: "date"
             />
		</div>
            
        
        <div>
        	<select value = {input.country} onChange={onChange}> 
            	<option></option>
                <option>한국</option> 
                <option>미국</option>
                <option>영국</option>
            </select>
            {country}
        </div>
        
        <div>
        	<textarea value={input.bio} onChange={onChange} /> 
            {bio}
        </div>
     </div>   
	);
};

수정할때마다 count값을 1 증가시킨다.

레퍼런스 객체 활용 사례 2

import {useState, useRef} from "react";

const Register = () => {
    const [input, setInput] = useState({
    	name = "", 
        birth = "", 
        country = "", 
        bio = "", 
    const countRef = useRef(0); 
    const inputRef = useRef(); //레퍼런스 객체 생성
    
	const onChangeName = (e) => {
		countRef.current ++;
        console.log(countRef.current);
        setInput({
        	...input,
            [e.target.name] : e.target.value
        });
	};
    
    const onSubmit = () => {
    	if(input.name=== ""){
          // 이름을 입력하는 DOM 요소 포커스
          inputRef.current.focus();
        }
    };

        
	return (
     <div>
		<div>
			<input 
              ref = {inputRef} //렌더링하게 되면 inputRef 레퍼런스 object에 저장이 된다.
              value={input.name} 
              onChange={onChange} 
			  placeholder = {"이름"}
             />
		</div>
        
        <div>
        	<input
              value={input.birth} 
              onChange={onChange} 
			  type: "date"
             />
		</div>
            
        
        <div>
        	<select value = {input.country} onChange={onChange}> 
            	<option></option>
                <option>한국</option> 
                <option>미국</option>
                <option>영국</option>
            </select>
            {country}
        </div>
        
        <div>
        	<textarea value={input.bio} onChange={onChange} /> 
            {bio}
        </div>
     </div>   
	);
};

이름을 입력하는 DOM요소에 focus를 맞추기 위해서는 입력하는 DOM 요소인 input 태그에 접근해야한다. 따라서 inputRef 레퍼런스 객체를 만들어준다.

React의 useRef? Javascript의 초기화?

useRef 대신 let count =0; 로 작성해도 리렌더링이 안 된다.
그럼에도 불구하고 useRef를 사용하는 이유는?

let count = 0;을 지역에 작성하고 리렌더링하면 초기화된다.
let count = 0;을 전역에 작성하고 리렌더링하면 useRef와 동일하게 수행되지만, 레지스터 컴퍼넌트가 두개일경우 두개의 레지스터의 변수들을 하나로 취급하여 렌더링 횟수를 센다. useRef`는 컴포넌트가 리렌더링 된다고 해도 다시 리셋되지 않는다.

React Hooks

React Hooks란? 클랫 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 도와주는 메서드이다. Function컴포넌트에서도 Class컴포넌트를 가져와서 사용할 수 있게 해주는 기능이다.
특징
이름 앞에 동일한 접두사 use가 붙는다.
조건문, 반복문 내부에서는 호출이 불가하다.
나만의 커스텀 Hook도 만들 수도 있다.

3가지 hook 관련된 팁

함수 컴포넌트, 커스텀 훅 내부에서만 호출이 가능하다.

import {useState} from "react";

const HookExam = {}> {
	const state = useState(); // 이런식으로 내부호출
    
    return <div>hookexam</div>
};
export default HookExam;

조건문, 반복문로 호출될 수는 없다.

if(true) {
	const~
};

불가능! 서로 다른 hook 혼란이 생겨 오류 발생할 수도 있다.

나만의 커스텀 Hook도 만들 수도 있다.
함수의 이름 앞에 use 라는 키워드를 써주면 된다.

김수진

이전 포스트

👩‍🎨 VsCode 유용한 플러그인

다음 포스트