CRA: create-react-app. 리액트 개발 환경을 세팅해주는 라이브러리이다.
npx create-react-app my-app
npm run-script start
🤔 React 개발 시 편리한 확장 프로그램
확장 프로그램 > 'react' 검색 > 가장 상단 프로그램 설치
rfce
: 다음과 같은 default 코드를 자동으로 생성해주는 모듈이다.import React from 'react' function App() { return ( <div>App</div> ) } export default App
src/App.js
App이라는 이름으로 App 함수를 내보내겠다.(export default
)
export default App;
src/index.js
같은 경로의 App.js
파일을 가져와서 사용하겠다.
import App from './App';
다음 코드를 통해 public/index.html
의 <div id="root"></div>
를 찾는다.
src/const root = ReactDOM.createRoot(document.getElementById('root'));
App()
안에 자바스크립트와 관련된 내용return
안에 HTML과 관련된 내용<>...</>
)로 감싸주어야 한다.import React from 'react'
function App() {
return (
<>
<p className="jytrack">안녕하세요!</p>
<p className="jytrack">안녕하세요!</p>
<p className="jytrack">안녕하세요!</p>
</>
);
}
export default App;
🤔 컴포넌트?
컴포넌트란 개발자가 만든 태그를 의미한다고 볼 수 있다. 컴포넌트를 만들 때, 대문자로 만들어야 하는데 이는 HTML 태그와 충돌을 피하기 위함이다. (개발자 맞춤 태그다! 라고 알려주는 것.)
리액트에서는 자바스크립트 파일 하나하나를 컴포넌트라고 부른다.
style={{}}
를 원칙으로 한다.{}
로 감싸주어야 한다.import './App.css';
import React from 'react'
function App() {
let 인삿말 = "안녕하세요!";
return (
<>
<p style={{fontSize: "20px"}}>
{인삿말}
</p>
</>
);
}
export default App;
state
HTML, CSS, JS로 웹페이지를 만들면, 브라우저에서 이를 읽어서 보여준다.
반면, React 같은 경우에는 화면이 이동되거나 어떤 이벤트에 의해 컨텐츠가 바뀔 때 A페이지와 B페이지를 비교하고 바뀌는 부분만 렌더링하는 방식이다.
리액트에서는 state
가 바뀔 때, 새로고침이 되지 않는다. 이는 새로고침 하지 않고 사용자에게 컨텐츠를 보여주고 싶을 때 state
를 사용할 수 있다!
state는 문자, 숫자, 배열, 오브젝트, 기타 등등이 될 수 있다.
useStateSnippet
const [first, setfirst] = useState(second);
useState()
는 arrow function
으로 작성this
사용 ❌const [first, setfirst] = useState(second);
function useState() {
...
return [스테이트, 스테이트를 바꾸는 함수]
}
버튼을 클릭할 때마다 숫자가 1씩 증가하는 예제이다.
import './App.css';
import React, {useState} from 'react'
function App() {
const [Target, setTarget] = useState(0);
const 숫자늘리기 = () => {
setTarget(Target+1);
}
return (
<div style={{fontSize: "20px"}}>
<button onClick={숫자늘리기}>클릭</button>
<br/>
{Target}
</div>
);
}
export default App;
👉 결과
if-else
대신 삼항연산자를 사용해 버튼을 클릭할 때마다 Target의 상태를 true
, false
로 상태를 변경하는 예제이다.
조건 ? 조건이 참일 때 반환 : 조건이 거짓일 때 반환
import './App.css';
import React, {useState} from 'react'
function App() {
const [Target, setTarget] = useState(false);
const 바꾸기 = () => {
setTarget(!Target);
}
return (
<div style={{fontSize: "20px"}}>
{
Target ?
<p>Target이 true!</p> :
<p>Target이 false!</p>
}
<button onClick={바꾸기}>바꾸기</button>
</div>
);
}
export default App;
👉 결과
List에 바로 push를 할 수 없으므로 temp라는 배열을 만들어서 진행했다.
import './App.css';
import React, {useState} from 'react'
function App() {
const [List, setList] = useState([0]);
const [Target, setTarget] = useState(1);
const ListFunction = () => {
let temp = [...List];
temp.push(Target);
setList([...temp]);
setTarget(Target+1);
}
return (
<div>
<p>리스트: {List}</p>
<p>타겟: {Target}</p>
<button onClick={ListFunction}>타켓의 값이 List에 들어감</button>
</div>
);
}
export default App;
👉 결과
예제 3의 코드를 반복문(map()
)을 이용해 출력할 수도 있다.
return (
<div>
<span>리스트: </span>
{
List.map((element, index) => {
return(<p key={index}>{element}</p>);
})
}
<p>타겟: {Target}</p>
<button onClick={ListFunction}>타켓의 값이 List에 들어감</button>
</div>
);
🤔 참고