[React] 이것만 알아도 반은 성공 ①

choii_ii·2025년 6월 17일

📢 React를 배우기 전,,(끄적끄적)

요즘 웹 개발 세계에서 React는 빠지질 않는다.
도대체 React가 뭐길래 다들 배우라고 난리일까?

그리고 "퍼블리셔가 이걸 꼭 알아야 해?"라는 생각은 이제 옛말이 되었다.

나도 한 2년 전쯤? 회사 다닐 때 틈틈이 공부해보려고 했는데, 퇴근하고 공부한다는 게 말처럼 쉽진 않았다. 진짜 웬만한 의지랑 광기가 없으면 꾸준히 하기 힘든 것이었음!!
그래서 그땐 그냥 '포트폴리오부터 만들고, 이직 후 천천히 배우자'하고 React는 잠깐 미뤄뒀었는데…
지금 생각하면, 그때 바로 시작할 걸 그랬다.
진작에 익혀뒀으면 더 효율적으로 웹사이트 만들고 운영할 수 있었을 텐데 말이지...
(그리고 취업도 더 빨랐겠지..🤦🏻‍♀️)

여기까진 그냥 나의 넋두리였고, 이제 본격적으로 React가 뭔지 알아가보자

🌟 React란?

🪄 React는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리로, HTML요소들을 조립하듯 구성하여 동적인 웹 화면을 만들 수 있게 도와주는 도구라고 생각하면 된다. 즉, 기존에는 HTML, CSS, JS 파일단위로 나눠 작업하던 반면, React는 컴포넌트(Component) 단위로 화면을 조각조각 나눠 코드를 작성한다. 그래서 유지보수나 재사용이 훨씬 쉬워지고, 복잡한 UI도 깔끔하게 구현이 가능하다는 장점이 있다.

👍🏻 컴포넌트(Component) 기반 구조

🔹 화면을 button, card, list 같은 작은 조각(=컴포넌트)으로 나눠서 만들어 유지보수나 재사용이 쉬워진다.

👍🏻 빠른 화면 업데이트 (Virtual DOM)

🔹 React는 가상 DOM을 먼저 바꾼 다음 실제 DOM과 비교해서 변경된 부분만 업데이트하여 빠르고 부드러운 성능을 보장한다.

👍🏻 재사용성 좋은 코드

🔹 한 번 만든 컴포넌트를 props(속성)만 변경하여 여기저기서 쉽게 사용할 수 있다.

🌟 JSX! 리액트를 위한 필수 문법

🪄 React를 공부하다보면 꼭 듣게 되는 것이 바로 JSX이다. JSX는 쉽게 말해서 JS안에서 HTML처럼 보이는 코드를 쓸 수 있게 해주는 문법이다.

👍🏻 직관적인 UI + 쉬운 유지보수

🔹 HTML 구조가 한눈에 보이고, 화면구성 + 동작 코드를 한 곳에서 작성할 수 있어서 유지보수가 쉽다.

👍🏻 조건부/반복 렌더링도 문제없음

🔹 JSX는 JS문법을 그대로 쓸 수 있어서, 삼항 연산자, &&, if문 등을 사용해 조건에 따라 다른 UI를 보여줄 수 있다. 또, map() 같은 배열 메서드를 활용해서 리스트나 카드 UI를 구성할 때 반복 렌더링하는 것도 가능하다.

🔻 JSX 예시 🔻

<script>
	function App(){
    	// JSX 문법
		return <h1>안녕, 리액트!</h1>;
	}
</script>

🧩 JSX문법은 이렇게!

👍🏻 태그는 꼭 하나의 부모 요소로 감싸기!

🔹 여러 개의 태그를 그냥 나열하면 오류가 발생하게 된다. 따라서 <div> 태그로 감싸주거나 <> </> 같은 Fragment 문법을 써야한다.

👍🏻 JS스타일의 HTML 속성 사용하기!

🔹 <script type="text/babel"> : 브라우저에서 JSX 문법을 사용 가능하게 만들어주는 설정이다. JSX는 브라우저가 직접 이해할 수 없기 때문에, Babel이 중간에서 JSX를 일반 JS 코드로 변환해주어야 한다.
🔹 class -> className, for -> htmlFor
🔹 JSX는 자바스크립트 기반이기 때문에 HTML 속성도 위처럼 JS 스타일로 작성해야한다.

🧩 바닐라JS VS JSX(React)

👍🏻 바닐라JS

🔹 HTML 작성 -> JS에서 요소 가져오기 -> 이벤트 감지 -> 데이터 업데이트 및 이벤트 실행

🔻 클릭이벤트를 통한 숫자 카운팅 스크립트 (바닐라) 🔻

<body>
	<span>Total clicks : 0</span>
	<button id="btn">Click me!</button>
</body>

<script>
	let counter = 0;
    const span = document.querySelector('span');
    const button = document.querySelector('#btn');
    button.addEventListener('click', handleClick);
    
    function handleClick() {
        counter = counter + 1;
        span.innerText = `Total clicks : ${counter}`;
    }
</script>

👍🏻 JSX(React)

🔹 컴포넌트 생성 -> 상태 정의 -> 렌더링

🔻 클릭이벤트를 통한 숫자 카운팅 스크립트 (JSX(React)) 🔻

<body>
    <div id="root"></div>
</body>

<script type="text/babel">
	const root = document.querySelector('#root');
    
    // App() : 컴포넌트 함수 (재사용 가능한 UI 조각)
	function App(){
    	// 컴포넌트 상태 관리
		const [counter, setCounter] = React.useState(0);
        // click 이벤트 정의
    	const onClick = () => setCounter((current) => current + 1);
     	return (
        	// JSX 문법 : 상태가 변경되면 자동으로 렌더링됨
     		<div>
        		<h3>Total clicks : {counter}</h3>
            	<button onClick={onClick}>Click me!</button>
        	</div>
     	);
     }
     
     ReactDOM.render(<App />, root); // App 컴포넌트를 root 요소에 렌더링(그리기)
</script>