1. React 기본

 

 

서론

React를 왜 배워야하며, 기본적인 React의 기초 개념에 대해 알아본다. 

 

---

 

 

본론

1. Frontend 개발자는 React를 왜 배워야할까? 

웹 프론트엔드 프레임워크로 다양한 기술들이 있는데  Vue, Angular React중 필자가 React로 개발을 배워야 하는 궁극적인 이유를 뽑자면 대한민국 IT 기업들의 프론트엔드 개발자 수요적인 측면을 확인하면 된다. 기업의 수요를 확인해보면 React가 절대 다수이며 이는 2022년기준으로 어떤 채용사이트를 들어가더라도 쉽게 확인할 수 있다. 그리고 대부분의 기업들은 한가지 기술을 선택하면 쉽게 다른 기술로 변할 수 없는 측면이 있다. 따라서 향후 10년간은 게임체인저가 등장하지 않는 이상 React 시장은 견고할 것이라 판단되며  더 많은 기회를 얻고자 하는 프론트엔드 개발자라면 React의 공부는 필수일 것이다. 

2. JSX 기초 문법

JSX라는 언어는 Javascript에서 html을 쉽게 작성할 수 있게끔 도와주는 언어이며 XML을 추가한 확장한 문법으로 React로 개발할 때 사용된다. 

React.createElement('div',null,'Hello World')

상기 코드는 JSX를 사용하지 않을 때 React상에서 div 태그를 만드는 방법으로 우리는 JSX를 활용함으로 <div> 태그를 쉽게 활용할 수 있는 것이다. 

 

2.1 컴포넌트 내부는 하나의 DOM 트리구조로 이루어져야 한다.

하단은 에러코드다 왜일까? 

function Test(){
  return (
    <div>Hello</div>
    <div>World!</div>
  );
}

<div></div> 하나로 감싸져야한다.

<> </> 이런식으로 표현할 수도 있다. 

2.2 javscript 표현식을 사용하기, 그리고 이를 응용하여 조건식 사용 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators

Expressions and operators - JavaScript | MDN

JSX내부에서 표현식을 사용하려면 {}로 감싸준다. 

if문과 for loop의 경우 javascript의 표현식이 아니기 때문에 조건부에 따른 렌더링시 JSX 외부에서 사용하는 방법과 {} 안에서 삼항 연산자를 사용하는 방법이 있다

 

방법1 -> { } 안에서 삼항 연산자를 사용하는 방법 (내부)

function Test(){
  const userName = 'kim';
	return (
		<div>
			<div>
				{userName === 'kim' ? (
					<div>kim 입니다.</div>
				) : (
					<div>not kim 입니다.</div>
				)}
			</div>
		</div>
	);
}

 

방법2 JSX 외부에서 사용하는 방법 외부에서 사용

function Test2(){
  const userName = 'kim';
  let desc = '';
	
	if(userName === 'kim') {
		desc = <div>kim 입니다.</div>;
	} else {
		desc = <div>not kim 입니다.</div>;
	}
	return (
		<div>
			{desc}
		</div>
	);
}

 

2.3 JSX Style & class

JSX상에서 javascript문법을 사용하기 위해서는 {}를 사용하여야 한다. 따라서 직접 스타일을 적용할 때는 아래처럼 활용 

function Test(){
  const userName = 'kim';
  const testStyle = {
    backgroundColor: 'yellow',
		fontSize: '20px'
  }
	return (
		<div>
			<div style={testStyle}>
				{userName === 'kim' ? (
					<div>kim 입니다.</div>
				) : (
					<div>not kim 입니다.</div>
				)}
			</div>
		</div>
	);
}

 

보통 style을 적용할 때는 외부의 css파일을 import하여 class 이름을 일치시켜 style을 적용한다. 

JSX상에서는 이를 className으로 활용하여 적용한다. 

function Test(){
  const userName = 'kim';
  
	return (
		<div>
			<div className="modal">
				{userName === 'kim' ? (
					<div>kim 입니다.</div>
				) : (
					<div>not kim 입니다.</div>
				)}
			</div>
		</div>
	);
}

 

3. Component란 무엇일까? 

https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React

리액트에서 컴포넌트는 앱을 이루는 최소 단위

재사용 가능한 UI를 만들어 주며 데이터(props)를 입력받아 view(state) 상태에 따라 DOM의 node를 출력하는 함수이다. 

 

4. state란 무엇일까? 

state는 간단히 말해서 앱의 유동적인 데이터를 다루기 위해 있는 객체이다. 

변수는 변경되어도 자동으로 재렌더링이 안되지만 state는 변경될 시 자동으로 재랜더링 해준다. 

 

하단은 state를 변경하는 예시 

state변경함수(새로운 state)

function Test(){
  let [good, setGoodCount] = useState(0)
  
	return (
		<div>
			<div className="modal">
				<span onClick={()=>{setGoodCount(good+1)}}>{good}</span>
			</div>
		</div>
	);
}

 

---

 

 

 

결론

리액트의 기본적인 내용을 공부해보았다. 

 

---

 

 

 

 

◇ 요약 ◇

① 

②

③

④

⑤

 

 

 

 

참고자료