[REACT] REACT 문법 정리하기 (리액트를 다루는 기술)

1. App.js 파일

import './App.css';

function App() {
​​​​const name = '리액트!';
​​​​const number = 0;
​​​​const un = undefined;
​​​​const style = {
​​​​​​​​// 카멜 표기법으로 작성
​​​​​​​​backgroundColor: 'black',
​​​​​​​​color: 'aqua',
​​​​​​​​fontSize: '48px',
​​​​​​​​fontWeight: 'bold',
​​​​​​​​padding: 16,
​​​​};
​​​​
​​​​return (
​​​​​​​​<div>
​​​​​​​​​​​​1. 변수 및 3항 연산자 사용
​​​​​​​​​​​​{/* 3항 연산자 */}
​​​​​​​​​​​​{name === '리액트' ?
​​​​​​​​​​​​​​​​(
​​​​​​​​​​​​​​​​​​​​<h1>{name} 입니다.</h1>
​​​​​​​​​​​​​​​​) : (
​​​​​​​​​​​​​​​​<h1>{name}가 아닙니다.</h1>
​​​​​​​​​​​​)
​​​​​​​​​​​​}
​​​​​​​​​​​​
​​​​​​​​​​​​<h2>잘 작동하니?</h2>
​​​​​​​​​​​​​​​​
​​​​​​​​​​​​​​​​2. 중괄호를 통해 조건식 사용하기
​​​​​​​​​​​​​​​​{/*
​​​​​​​​틀리면 null임 / null 일 때 && 사용
​​​​​​​​다르면 아무것도 안 나타남. 조건을 만족해야 && 뒤 문법 실행 됨.
​​​​​​​​​​​​​​​​*/}
​​​​​​​​​​​​{name === '리액트!' && <h1>{name} 입니다.</h1>}
​​​​​​​​​​​​
​​​​​​​​​​​​3. 0의 활용법 :
​​​​​​​​{/*
​​​​​​​​값이 0이면 0 출력,
​​​​​​​​이외의 값이면  && 뒤 문법 실행 됨. 
​​​​​​​​*/}
​​​​{number && <div>내용</div>}
​​​​
​​​​<br></br>
​​​​
​​​​4. 값이 undefined :
​​​​{/*
​​​​​​​​1. undifined로 return하면 에러
​​​​​​​​2. return 내부에 부모가 여러개 있으면 에러남 <></> : fragment로 감싸야함
​​​​*/}

{/* undifined일때 || 조건 사용 */}
{un || '값이 undifined입니다.'}

<div>{un}</div>
{/* {un} : 에러발생 */}

5. 스타일 변수로 사용해서 적용하기
<div style={style}>{name}</div>

6. 인라인 스타일 적용하기
<div
​​​​style={{
​​​​​​​​backgroundColor: 'black',
​​​​​​​​color: 'aqua',
​​​​​​​​fontSize: '48px',
​​​​​​​​fontWeight: 'bold',
​​​​​​​​padding: 16,
​​​​}}
​​​​>
​​​​{name}
</div>

7. App.css 파일 사용
<div className="react">{name}</div>

8. input 사용 방법
{/* input만 적으면 에러남, br도 마찬가지 */}
<input></input>
<br></br>
<input />

9. 주석 사용하는 방법
{/* 주석 작성 방법 */}
<div // 태그 내부에서 사용하는 주석(//)
​​​​className="react"
​​​​>
​​​​{name}
</div>

{/* //, /*를 {} 없이 사용하면 페이지에 그대로 나타남 */}

10. html 태그와 동일하게 사용하기
<h1>들여쓰기 이상</h1>
<h2>코드</h2>
<p>입니다.</p>
</div>
);
}

export default App;

 

 

2. App.css 파일

.react{
​​​​background-color: aqua;
​​​​color: black;
​​​​font-size: 48px;
​​​​font-weight: bold;
​​​​padding: 16px;
}

 

3. 출력 화면

 

 

위와 같이 나오는 것을 확인할 수 있습니다~