9/26 (오후) 리액트 [JSX문법, React 사용방법, 디렉토리 구조]
<ul를 위한 라이브러리, 리액트>
리액트란 무엇인가?
자바스크립트 라이브러리 중 하나 사용자의 인터페이스를 만들기 위해 사용됨
리액트가 나온이유는?
자바스크립트만으로는 부족하니까!
자바스크립트가 가진 단점
1. html과 js가 가진 분리감(관련있는 html, js 문서들을 jsx으로 합쳐준다)
2. 직관적이지만 너무 긴 자바스크립트 문법
3. 새 페이지를 들어갈 때 마다 새로고침 [새로운 페이지나 메뉴를 들어갈 때 새로고침이 되지 않아 사용자의 피로도를 줄여준다 Single Page Application(SPA)]
라이브러리
:기능만 가져다 사용하는것! ex)리액트
- 버전이 업데이트 되더라도 이전 버전과 호환이 잘됨!
프레임워크
:제공된 틀 안으로 들어가 주어진 규칙을 지켜가며 사용하는 것 ex)앵글러, 뷰...
버전이 업데이트 되더라도 이전 버전과 호환이 잘 됨!
리액트의 역사: 페이스북의 엔지니어인 'Jordan Walke'가 개발
원활한 커뮤니티 형성>>다양한 문서 제공!
리액트의 확장
: 계속해서 상승하는 react의 인기, react native로 모바일 어플리케이션까지 제작 가능!
Single Page Application: 서버로부터 새로운 페이지를 불러 오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 유저와 소통하는 웹사이트
새 페이지를 넘어갈 때 마다 정보를 가져오지 않아도 된다 >> 새로고침이 필요 없다!
JSX:Javascript에 XML을 추가한 확장문법 하나의 파일에 자바스크립트와 HTML를 동시에 작성한다
자바스크립트와 html 파일에 분리감이 없기 때문에 가독성이 높고 작성하기 쉽다
JSX: Javascrpt에 XML을 XML을 추가한 확장문법 하나의 파일에 자바스크립트와 HTML를 동시에 작성한다
=> 자바스크립트와 HTML파일에 분리감이 없기 때문에 가독성이 높고 작성하기 쉽다
<JSX 문법>
1. 여러 요소가 있다면 반드시 부모요소로 감싸야한다. 이때, 꼭 div 태그가 아니어도 상관 없다(<></>도 가능)
2. 표현식 사용 가능( JSX 내부에서 JS 표현식이 가능하다. 단, 표현식 내부에서 if문 사용 불가능!/ 삼항연사자로 대체 가능!
3. 리액트에서는 class 대신 className을 사용, 삼항연산자로 대체 가능!
4. 스타일링 적용 시, 객체 형태로 삽입
<index.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html><index.js>
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
//만약, 전에 했던 코드로 돌아가고 싶다면
// AppExample -> App으로 변경
import App from './AppExample';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();<App.js>
import './App.css'
function App() {
// JSX: 하나의 파일 안에 HTML과 JS를 동시에 저장 => 가독성이 좋고 작성이 쉬움, 기능 분류 쉽다
//(1) 여러 요소가 있다면 반드시 하나의 부모요소로 감싸줄 것
// 이때, 꼭 div 태그가 아니여도 가능! (<> </> -> 가능)
//(2) 표현식이 사용 가능
// 만약, return()안에서 JS 문법을 사용하려면? {} 안에 작성
// (단, if문은 사용 불가)
// 만약, 조건이 하나라면 &&연산자 (2-2 참고)
// 조건이 true/false 두개라면 삼항연산자(2-1참고)
// 조건이 3개 이상 다중이라면 return()위에서 if 문 사용
let name = '홍길동'
let state = 'closed'
// (3) 기존 문법과 다른 점들!
// class대신 className 사용
// 태그를 사용할 때, 소문자만 사용할 것
// ** 대문자는 컴포넌트 이름으로 사용해야 함
// 끝태그 생략 불가! (content가 없더라도)
//(4) 스타일링 적용이 가능
// (4-1) 객체 형태로 삽입
const welStyle={
fontSize: '50px',
color:'blue',
backgroundColor:'yellow'
}
// (4-2) css 형태로 삽입
// import 되어있는 css에 작성
return (
<div>
<div className="App" style={welStyle}>
{/* (2-1) 삼항연산자 이용 */}
{name ==='홍길동'? <p>{name}의 홈페이지에 오신 것을 환영합니다!</p>: <p>{name}님 다음 기회에 찾아와주세요...</p> }
{/* (2-2)&&연산자 이용 */}
{state === 'open' && <p>열려있어요!반갑습니다!</p>}
</div>
<div style={welStyle}>환영합니다</div>
</div>
);
}
export default App;<app.css>
body{
background-color: gray;
}
만약, 내가 다시 서버를 키고싶다면?
Alt L O 는 라이브서버이다이제 사용 안함!!!!!!
cmd 로 돌아가서 ctrl+C로 기존에하던 작업을 멈추고 다시 npm start 로 서버를 킨다!
React 사용 준비
1. Node 설치 및 노드 버전 확인
- 노드는 LTS 버전
- 노드가 설치됐는지 확인은 cmd 창에 node(띄어쓰기) -v 검색
- npm -v => 설치 여부 확인
2. 폴더 생성
- 원하는 위치에 폴더를 생성(커다란 작업 환경이 될 공간)
# cd : change directory
cd react-app
- 내가 만든 React 폴더 위에 주소 클릭해서 경로 따내기
윈도우+R =>cmd
=> cd 컨트롤브이
3. react app 생성
# npx : npm을 실행하는 모듈
npx create-react-app 'project01'
4. 폴더 재설정
cd project01
5. 코드 시작
code .
6. React 사용
| npm start |
<총정리>
*** cmd. 터미널
cd: change directory 경로 이동
- cd + 내가 실행하길 원하는 폴더의 경로
- cd.. : 상위 폴더
** directory에 json이 없는것 같은데? => 경로설정 오류
-vscode 코드를 실행 : code .
- 브라우저창을 실행 : npm start
만약에! 코드를 다시 키고 싶은데 cmd에 입력창이 없다면?
- 실행 취소: ctrl+c
// React
- Single Page Application (SPA) -> 새로 고침이 없음
- JSX : HTML + JS
(1)class => className
홀태그? => 사용불가, 끝태그 꼭 닫아줘야 함!
대문자? 소문자? => 소문자만 사용할 수 있음
(2) 여러 요소가 있다면 반드시 커다란 하나의 요소로 감싸야 함
(3) 표현식 사용 가능
=> return ()안에 JS문법을 쓸 때 {}
if문 사용 불가
=> 삼항 연산자
=> &&연산자
(4) 스타일링
4-1) 객체 형태로 - camel Case
4-2) css연결: import
function AppExample(){
// 1. 사용자에게 이름을 입력받아준다
// prompt ('이름을 말해주세요!')
let name = prompt('이름을 입력하세요')
// 2. 현재 날짜를 가지고 올 것
// 현재 몇월? getMonth()
let today = new Date()
let date = today.toLocaleDateString()
console.log('오늘의 날짜는',date)
let month = today.getMonth()+1
console.log('이번 달은',month)
//3.
// 조건1) 3~5월 : 봄
// 조건2) 6~8월 : 여름
// 조건3) 9~11월 : 가을
// 조건4) 12,1,2월 : 겨울
let season = ''
if(month >=3 && month <=5){
season='봄'
} else if(month >=6 && month <=8){
season='여름'
} else if(month>=9 && month <=11){
season='가을'
} else {
season='겨울'
}
console.log('현재의 계절은', season)
//결과창
//2022.9.27
//<hr></hr>
//000님 지금은 가을입니다. 좋은 하루보내세요!
return(
<>
<h1>{date}</h1>
<hr/>
<h4>{name}님 지금은 {season}입니다. 좋은 하루 보내세요!</h4>
</>
)
}
export default AppExample;