리액트 강의 들으면서 정리하기
💻 설치 및 실행 방법
1. node.js 하위버전을 설치합니다. (최신버전 에러 걸릴 확률 높음)
2. VScode에 터미널을 열고 'npx create-react-app 프로젝트명' 이라고 작성하고 설치한다.
3. 그 프로젝트 파일을 열고 src에 App.js를 열고 터미널에서 미리보기를 띄우고 싶으면 'npm start'라고 치면 됩니다. 그럼 실시간으로 라이브 서버를 띄워줍니다.
Node.js 를 설치한 이유 : creat-react-app 라이브러리 때문에, npm이라는 툴 이용가능
App.js는 메인페이지에 들어갈 HTML짜는 곳
public/index.html이 메인페이지
public : static 파일 보관함 (이미지 파일 / 파비콘 등)
리액트 프로젝트를 다 만들고 나면, 빌드, 발행, 컴파일 등을 하는데 우리가 짰던 코드들이 다 압축이 되는데 public폴더에 넣으면 코드가 압축이 되고 이상하게 되지가 않습니다.
src : 소스코드 보관함
실직적인 코드는 다 여기서 작성한다. 웹 개발 방식이랑 별반 다를 것이 없다.
package.json : 설치한 라이브러리 목록
내가 설치한 라이브러리들을 쫙 다 모아놓은 파일이라고 보면 된다.
우리가 건들 필요는 없다.
App.js 안에 function App() { (이 안에 평소에 웹 만들던 것 처럼 HTML코딩을 하면 됨) }
태그에 class를 주고 싶으면? HTML 대신 JSX 이 문법은 <div class = ""> 이게 불가능하다. <div className="클래스명"> 이렇게 써야함.
리액트가 쌩HTML코딩보다 편리한 이유? 데이터 바인딩이 쉽다는 이유가 있습니다.
데이터 바인딩이란?
데이터를 HTML에 꽂아넣는 것.
바꾸고 싶은 데이터가 있으면 <h4> { } </h4> 이렇게 중괄호를 넣으면 됩니다. 위에 보이는 사진처럼 posts를 중괄호 안에 넣어주면 됩니다. 그러면 변수가 그 안에 들어가게 됩니다. 함수명도 집어넣을 수가 있다.
이미지를 넣고 싶으면 img 속성이 아니라 보통은 import logo from './logo.svg'; 이런식으로 넣는다. import 해온 다음에 빨간 이름(logo)를 가져와야합니다. 그런데 중괄호 안에 넣어야합니다. src,id,href등의 속성에도 {변수명,함수 등}
상상하는 모든 곳에 { }로 변수 집어넣기 가능
<div className={ posts } >개발 Blog</div>
이런 것도 가능합니다. 가장 중요한 두 번째 문법입니다.
JSX에서 style 속성 집어 넣을 때
style은 무조건 { } 입니다.
style={object 자료형으로 만든 스타일}
그런데 이제 우리는 font-size라는 건 쓸 수 없습니다. 왜냐면 자바스크립트에서 - 는 빼기이기 때문입니다. camelCase 작명관습에 따라 속성명을 바꿔줘야합니다.
<div style={ {color : 'blue' , fontSize : '30px'}}>개발 Blog</div>
이렇게 써줘야 합니다. 하지만 저렇게 쓰는 것은 코드 가독성도 별로 좋지않기때문에 변수명으로 적어주는 게 효과적입니다.
import logo from './logo.svg';
import './App.css';
function App() {
let posts = {color : 'blue' , fontSize : '30px'};
return (
<div className="App">
<div className="black-nav">
<div style={ posts }>개발 Blog</div>
</div>
<img src={ logo } />
{/* <h4> { posts } </h4> */}
</div>
);
}
export default App;
변수 말고 데이터를 저장할 수 있는 또 다른 방법 state라는 것을 쓰면됩니다. 1. 변수에 넣거나 2. state에 넣거나 두가지 방법이 있습니다.
state는 import React, {useState} from 'react';
이렇게 쓰면 됩니다. 지금 리액트 안에 있는 내장함수를 가져다 쓰겠다고 한 것입니다.
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
useState('여자 코트 추천'); [a,b]
let posts = '강남 고기 맛집';
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<div className="list">
<h3> { posts } </h3>
<p>2월 17일 발행</p>
<hr/>
</div>
</div>
);
}
이렇게 쓰면 배열이 남습니다. 그 안에는 두 개의 데이터가 들어가 있습니다. 첫번째 a 에는 '여자 코트 추천' 이 들어가고 b에는 데이터를 수정하기 위한 state를 정정해주는 함수를 하나 생성해 줍니다.
[state 데이터 , state 데이터 변경 함수]
let [a,b] = useState('여자 코트 추천');
a랑 b라는 변수를 만들겠습니다. 그런데 useState에 있던 두개의 데이터를 각각 넣어주세요 라는 신 문법입니다. destrructuring 이라고 합니다.
var [a,b] = [10, 100];
10, 100을 a와 b변수에 담아주세요~ 라는 말이 됩니다.
array, object에 있던 자료를 변수에 쉽게 담고 싶을 때.
var a = 10
var a = 100
useState()를 이용해 만들어야함
이것의 장점은 리액트를 웹이 App처럼 동작하게 만들고 싶어서
글 제목 순서가 바뀔 수도 있고 변경이 될 수도 있고 수정될 수도 있고
그럴 경우에 데이터가 바뀌면 state로 만들어진 데이터를 담고있는 HTML이 자동으로 재렌더링
이 됩니다.
그냥 변수는 변경되어도 자동 재렌더링이 안됩니다. 새로고침이 되어버린다.
자주 바뀌는, 중요한 데이터는 변수 말고 state로 저장해서 쓰세요!
이렇게 하면
이런 화면이 만들어 집니다.