[React] 리액트 시작하기

yeoni·2025년 12월 23일

✏️ React

목록 보기

1/1

React란

✔️ 리액트는 웹프레임워크
✔️ 자바스크립트 라이브러리의 하나로써 사용자 인터페이스를 만들기 위해 사용하는 언어
✔️ 페이스북이 제공하는 프론트앤드 라이브러리 라고도 볼 수 있음
✔️ 현재 가장 많이 사용되고 인기 있는 라이브러리
✔️ 쉽게 구축하기 위해서 컴포넌트로 구축

📌간단한 용어 설명

프레임워크 :개발을 하기 위해서 편리하도록 만들어 놓은 뼈대

라이브러리 : 사용자가 필요할 때 부분적으로 사용이 가능한 개발자를 위한 도서관

인터페이스 : 서로 다른 두 시스템,장비,소프트웨어 등을 서로 이어주는 접속 장치

컴포넌트 : HTML 태그를 반환하는 함수, 재사용 할 수 있는 코드

💡 특징

컴포넌트 (Component0
화면을 버튼, 카드, 헤더 같은 작은 조각으로 나누어 재사용성(Reusable)이 뛰어남
선언형(Declarative)
“어떻게”보다 “무엇을” 보여줄지에 집중
가상 DOM (Virtual DOM)
화면 변경을 효율적으로 처리해 성능 향상
단방향 데이터 흐름
데이터 흐름이 예측 가능해서 버그 감소
state와 props를 가짐

ex) 리액트 코드

function Hello() {
  return <h1>Hello React!</h1>;
}

💡리액트 기본 문법 JSX

JSX를 사용하기 전에 어떻게 리액트가 요소를 생성하는지 알아보고 넘어가자.

onst div = React.createElement('div', {className: 'test'}, ....attribute 지정);

위와 같이 React DOM을 통해 createElement() 내부의 파라미터를 입력함으로서 요소를 생성할 수 있다.
하지만 이러한 방법을 이용하면 코드량도 많아지고 가독성이 떨어지기 때문에 많은 개발자들이 JSX문법을 사용하는 것이다. 그렇다면 본격적으로 JSX문법을 알아보자.

💡JSX

📖JavaScript XML로 JavaScript에 XML을 추가하여 확장한 문법

리액트에서는 본질적으로 렌더링 로직이 UI로직과 연결된다는 사실을 받아들이기 위해 JSX를 사용한다. 이 말은 이벤트가 처리되고, 시간에 따라 상태가 변하며, 화면에 표시하기 위해 데이터가 준비되는 방식등을 이야기하는 것이다. JSX가 필수는 아니지만 대부분의 개발자들이 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 도움을 주기 때문에 가독성이 좋다.

⚡️ JSX 기본문법

//표현식 사용하기
const name = 'Mr.Hwang';

const TestElement = () => {
  return (
  	<h1>Hello, {name}</h1>}
  );
};

위 코드는 name이라는 변수를 선언하고 JSX내에서 표현하기 위하여 중괄호{}를 이용하여 사용한 것이다. 이렇게 JavaScript 영역에서 html태그 안에 선언된 변수를 표현할 수 있다.

const TestComponent = () => {
  return (
	<div>
  		<TestElement /> // 사용자가 정의한 컴포넌트 호출
  	</div>
  );
};

또는 위와 같이 자식을 정의하여 사용할 수도 있다. 당연히 자식에게도 변수를 표현할 수 있다.

⚡️ 컴포넌트 정의(함수형)
이번에는 컴포넌트를 정의하고 JSX안에서 Event를 연결하는 문법에 대해서 알아보자. 위에서 설명한 함수형과 클래스형 중에 함수형을 다뤄보겠다.

//함수형 컴포넌트 선언
function App(){
  	//카운트 변수 선언
  	let conut = 0;
  	//카운트 증가 함수 선언
  	const setCount = function(){
    	count++;
    }
  	//return 영역 내에 JSX 작성
	return(
    	<div>
      		//태그 내 변수 표현
      		<h1>Click count : {count}</h1>
			//이벤트 기능 구현
			<button onClick={setCount}>cilck</button>
      	</div>
    )
}

컴포넌트를 정의할 때 중요한 부분은 우선 컴포넌트 명의 첫글자는 대문자를 사용하는 것이다. 그리고 return은 하나의 JSX만 반환할 경우 대괄호()가 필요없으나 여러 JSX를 반환할 경우에는 대괄호()로 묶어주어야한다. 변수는 위에 설명한 것처럼 중괄호{}로 감싸주며, 함수도 마찬가지이다. Event를 지정할 때에는 카멜기법을 정확히 준수하여 정의해주어야한다.(예 : onClick -> onclick으로 하면 오류가 난다.)

⚡️ 태그 속성
이번에는 태그에 속성을 부여할 때 주의해야하는 부분에 대해서 다뤄보자.

//일반적으로 태그에 속성을 부여하는 형태
function APP(){
	return(
    	<div class="container">
      		<label for="test">label</label>
      	</div>
    )
}


//JSX문법으로 속성 부여
function APP(){
	return(
    	<div className="container">
      		<label htmlFor="test">label</label>:,, 
      	</div>
    )
}

위 코드를 보면 일반적으로 HTML 태그에 속성을 주는 것 처럼 정의하면 리액트에서는 인식을 하지 못한다. 이러한 이유는 html의 속성을 구분해줘야하기 때문이다. 리액트에도 클래스형 컴포넌트가 있으니 class라고만 정의하면 인식에 장애가 발생하는 것이다.

기본적인 문법에 대해서는 알아보았다. 그렇다면 이렇게 선언된 컴포넌트는 어떻게 호출하는지 알아보자.

⚡️컴포넌트 호출

//....생략
<body>
  <div>
    <App /> <!-- 컴포넌트명을 태그로 감싸서 호출 -->
  </div>
</body>

같은 html 문서내에 script영역이 위치한다면 원하는 위치에 호출해주면 된다. 별도로 js 파일로 유지하는 경우 import를 하고 기타 등등 절차가 필요하니 해당 부분은 차후에 설명하겠다.

yeoni