[React] 시작하기 - 컴포넌트, JSX, CSS 작성법, 이벤트 처리

dev_vming·2023년 12월 6일
React
0

React

목록 보기
1/1

📚 React 시작하기

📕 create-react-app

터미널 창에서 아래와 같은 명령어 입력하면 react 앱의 기본 파일들이 생성된다.

npx create-react-app 프로젝트이름

실행하기

모든 파일들이 설치된 후 터미널에 npm start 입력 시, 자동으로 브라우저가 열리고 기본적으로 만들어진 앱 화면을 볼 수 있다.

위 화면에서 보이는 내용은 app.js 파일에서 확인, 수정할 수 있다. 앱을 종료하기 위해서는 ^C를 입력하면 된다.

node_modules

기본적으로 생성되는 폴더 중, node_modules라는 폴더가 있다. 이는 프로젝트를 실행할 때 사용되는 dependency module들이 담겨있다. node_modules 폴더는 용량이 굉장히 커 .gitignore에 추가한다.

package.json

위의 node_modules 폴더의 내용들은 package.json 파일의 dependencies에 저장된다. node_modules가 없을 때에는 package.json 파일이 있는 경로에서npm install을 통해 설치할 수있다.

📗 컴포넌트(Component)란?

리액트에서 컴포넌트란 UI를 재사용 가능한 개별적인 여러 조각으로 나눈 것을 말한다. 즉, 앱을 구성하고 있는 최소한의 단위라고 볼 수 있다.

사용방법

리액트에서 정의하는 컴포넌트의 종류는 크게 함수형 컴포넌트와 클래스형 컴포넌트의 두 가지가 있지만, 이 글에서는 함수형만 다루도록 하겠다.

import "./App.css";

function App() {
	return (
		<div className="App">
			<h1
				style={{
				color : "#f0f",
				backgroundColor: "green",
				}}
			>
				welcome
			</h1>
		</div>
	)
};

export default App;

모든 컴포넌트 명은 대문자로 시작해야 하며, 이 함수가 return하는 것은 JSX(JavaScript XML)이다.

JSX (JavaScript XML)

JSX는 아래와 같이 작성할 수 있으며, 작성 시에는 여러 사항들을 주의해야 한다.

import "./App.css";

function App() {
	const name = 'Tom';
	const naver = {
		name : "네이버",
		url : "https://naver.com";
	};

	return (
		<div className="App">
			<h1
				style={{
				color : "#f0f",
				backgroundColor: "green",
				}}
			>
				welcome, { name }. <p>{ 2 + 3 }</p>
			</h1>
			<a href={naver.url}>{naver.name}</a>
		</div>
	)
};

export default App;

  • 태그 내에서 class를 지정해 줄 때는 자바스크립트 예약어인 class와 구분하기 위해 className으로 작성해야 한다.

  • 인라인 스타일 적용 시, 중괄호 안에 객체 형식으로, 속성 값은 문자열로 작성해야 한다.

  • 중괄호 내부에서 변수를 사용할 수 있다. ( 숫자나 문자열은 표현 할 수 있지만, 객체나 boolean 타입은 표현하지 못한다.)

📘 컴포넌트 사용하기

컴포넌트 생성

컴포넌트를 만들 때에는 아래와 같이 여러가지 방법을 사용할 수 있다.

const Hello = function(){
		return <p>Hello</p>
};

export default Hello;
const Hello = () => {
		<p>Hello</p>
};

export default Hello;
export default function Hello (){
		return <p>Hello</p>
};

컴포넌트 사용

위와 같이 컴포넌트를 생성 후엔 다른 파일에서 import해 사용할 수 있다.

import "./App.css";
import Hello from "./component/Hello";

function App (){
	return (
      <div className="App">
        <Hello />
      </div>
    )
};

export default App;

주의해야 할 점은 최상위 태그가 하나만 있어야 한다는 점으로, 제일 바깥에 <>,</>으로 감싸주어 해결할 수 있다. 한 번 만들어 둔 컴포넌트는 어디에든 몇번이든 사용 가능하다.

📙 CSS 작성법

인라인 스타일

인라인 스타일을 사용하면 별도의 css 파일없이 바로 작성할 수 있다.

import World from "./World";

export default function Hello() {
  	return (
    	<div>
    		<h1 style={{
				color : "#F00",
				borderRight : '2px solid #000',
				opacity : 0.5
    		}}>
				Hello
			</h1>
			<World />
			<World />
		</div>
	);
};

인라인 스타일 입력 시엔 style={} 중괄호 내부에 객체 형태로 작성한다. 이때 속성 값은 문자열, 숫자는 그냥 작성해주면 된다.

CSS 파일 활용

기존에 작성하던 대로 css 파일에 작성 시엔, 해당 파일을 import 해주면 된다.

.box {
		width : 200px;
		height : 50px;
		background-color : blue;
}

다만, css 파일은 각 컴포넌트에 종속되는 것이 아니므로, 오버라이딩에 유의해야한다.

각 컴포넌트에만 적용되는 css파일을 만들고 싶다면, 파일명.module.css를 이용하면 된다.

.box {
		width : 200px;
		height : 50px;
		background-color : blue;
}

이때 import 방법은 기존과 동일하게 import ‘파일명’이 아니라, import styles from ‘파일명’이다. 적용 시의 클래스 네임은 className={styles.box}와 같은 형태로 작성한다.

참고

위와 같이 작성 시, 동일한 클래스 명을 사용했음에도 각 컴포넌트에만 적용이 되는 것을 확인할 수 있다. 이는 자동적으로 클래스 명이 변경되어 적용되기 때문에 가능하다. (ex. Hello.module.css와 App.module.css 파일 모두 box라는 클래스 명을 가지고 있을 때 위와 같이 적용하면 클래스 명이 “Hello_box3-_ge”, “App_boxaq03i”와 같이 변경된다.)

📒 이벤트처리(Handling Evevts)

함수를 전달하는 방식

이벤트를 처리하는 방법에는 여러가지가 있다. 첫 번째는 미리 함수를 작성해두고 그 함수를 전달해주는 방식이다.

export default function Hello (){
  	function showName() {
   		console.log("Mike");
  	}
	
  	return (
      <div>
    	<h1>Hello</h1>
    	<button onClick={showName}>Show name</button>
		<button>Show age</button>
	  </div>
	)
};

버튼 클릭 시, 함수를 실행시키기 위해서는 onClick={함수명}과 같이 작성해주면 된다. 위의 함수에서는 반환하는 값이 없기 때문에 showName()을 작성하면 undefined가 들어가게 되어 원하는 결과가 나오지 않는다.

직접 함수를 작성하는 방식

위에서 작성한 것과 달리 함수를 따로 작성하지 않고, 직접 전달하는 방법이다.

export default function Hello (){
  
  function showName() {
    console.log("Mike");
  }
  
  return (
	<div>
		<h1>Hello</h1>
		<button onClick={showName}>Show name</button>
		<button onClick={() => {console.log(30);}}>
			Show age
		</button>
	</div>
   )
};

이 방법의 장점은 매개변수를 전달하기 편하다는 것이다.


아래 코드와 같이 함수에 매개변수를 받아 그 값을 출력하게끔 할 수 있다.

export default function Hello (){
  
  function showName() {
    console.log("Mike");
  }
  
  function showAge(age) {
    console.log(age);
  }
    
  return (
	<div>
		<h1>Hello</h1>
		<button onClick={showName}>Show name</button>
		<button onClick={() => {ShowAge(10);}}>
			Show age
		</button>
	</div>
   )
};

위 코드를 응용하면 input 값을 매개변수로 넘겨줄 수도 있다.

export default function Hello (){
  
  function showName() {
    console.log("Mike");
  }
  
  function showAge(age) {
    console.log(age);
  }
  
  function showText(e) {
    console.log(e.target.value);
  }
    
  return (
	<div>
		<h1>Hello</h1>
		<button onClick={showName}>Show name</button>
		<button onClick={() => {ShowAge(10);}}>
			Show age
		</button>
      	<input type="text" onChange={showText} />
	</div>
   )
};

showText 함수에서 콘솔에 찍히게 되는 e.target.value는 각각 e : input이 변경되는 (입력되는) 이벤트, target : input 태그, value : input 에 사용자가 입력하는 값을 말한다.

위의 코드에서 showText 함수를 정의하지 않고 아래와 같이 작성할 수도 있다.

export default function Hello (){
  
  function showName() {
    console.log("Mike");
  }
  
  function showAge(age) {
    console.log(age);
  }
    
  return (
	<div>
		<h1>Hello</h1>
		<button onClick={showName}>Show name</button>
		<button onClick={() => {ShowAge(10);}}>
			Show age
		</button>
      	<input type="text" onChange={(e)=>console.log(e.target.value)} />
	</div>
   )
};

📓 참고

(유튜브) 코딩앙마 - React js 강좌

profile
dev_vming
밍기적 개발하기🐛

0개의 댓글