JSX

프로젝트 시작하기

리액트를 사용할 때는 꼭 import로 react를 불러와야한다.

import React from 'react'

컴포넌트를 만드는 방법은 두가지가 있는데,

첫번째는 class를 통해서 생성하는 방법이다.

class  App  extends  Component {
	render() {
		return (
			<div>
				<h1>안녕하세요 리액트</h1>
			</div>
		);
	}
}

여기서 render()(렌더 함수 =메소드라고 부른다.)는 꼭 jsx형식의 코드를 리턴해줘야 한다.

JSX 기본 문법 알아보기1

jsx는 html처럼 생겼지만 작성하면 자바스크립트로 변환된다.

HTML과 비슷하지만, 지켜야할 규칙이 있다.

1. 태그는 꼭 닫혀있어야한다.

간혹 jsx문법에서 input태그를 안닫는 경우가 있는데 이럴 경우 오류가 발생하기 때문에 꼭 닫아줘야 한다.

<input type="text"> x
<input type="text" /> o <- 셀프클로우징 태그

2. 두개이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야한다.

• 하지만 불필요한 div 태그가 많아진다는 문제점이 있다.
• 이를 해결하기 위해 fragment를 지원해준다.

import  React,  {  Component, Fragment  }  from  'react';
class  App  extends  Component {
	render() {
		return (
			<Fragment>
				<div>안녕하세요</div>
				<div>리액트</div>
			</Fragment>
		);
	}
}

Fragment활용시 불필요한 최상위 div 태그 없이 사용할 수 있다.

JSX안에서 자바스크립트 값 사용하기

jsx문법에서 자바스크립트 값을 사용하기 위해서는 { }로 사용해준다.

import  React,  {  Component  }  from  'react';
class  App  extends  Component {
	render() {
		const  name  =  'react';
		return  <div>hello {name}</div>;
	}
}
export  default  App;

조건부렌더링

삼항연산자를 이용한 조건부 렌더링

class  App  extends  Component {
	render() {
		return (
			<div>
				{
					1  +  1  ===  3  ?
					'맞다.':
					'틀리다.'
				}
			</div>
		);
	}
}

특정값이 true일때만 보여지고 false일때는 안보이게 하고싶을때

class  App  extends  Component {
render() {
	const  name  =  'velopert'
	return (
		<div>
		{
			name ===  'velopert'  &&  <div>벨로퍼트다!</div>
		}
		</div>
	);
	}
}

&&연산자를 이용해서 조건부 렌더링을 할 수 있다.

조건이 여러개일 경우

class  App  extends  Component {
	render() {
	const  value  =  1;
	return (
		<div>
			{(function () {
				if (value ===  1) return  <div>1이다!</div>;
				if (value ===  2) return  <div>2다!</div>;
				if (value ===  3) return  <div>3이다!</div>;
			return  <div>없다!</div>;
			})()}
		</div>
		);
	}
}

• IIFE함수(즉시실행함수)를 선언해서 조건을 주는 방법을 사용한다.
• if문 대신에 switch문 사용도 가능
• 화살표 함수로 사용하면 더 깔끔하다.

화살표 함수는 ? this. arguments, super 이런 개념이 없는 함수

JSX 기본 문법 알아보기2

css 스타일 적용

기존에는 문자열형태로 태그에 삽입해주거나 클래스명, 태그로 css 스타일을 설정해줬다면,

JSX문법에서는 객체형태로 선언해준다.

class  App  extends  Component {
	render() {
		const  style  = {
			backgroundColor:  'red',
			fontSize:'15px'
		};

		return  <div  style={style}>안녕하세요!</div>;
	}
}

여기서 주의할 점은 -형태가 아닌 backgroundColor 처럼 카멜케이스로 작성해줘야 한다는 것이다.

const  style  = {
	fontSize:10 + 15 + 'px'
};

자바스크립트 상에서 스타일을 입력하는 것이기 때문에 위와 같은 형태로 작성해줄 수 있다.

class선언하는 법

return  <div calssName="App">안녕하세요!</div>;

class대신 calssName으로 선언한다.

import 'App.css' 

외부 css 파일을 import하는 방법

💻 강의 링크

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌

🔍 참고 문서

• JSX 참고문서
• let
• const
• 화살표 함수