📌 지난 포스트
[React] 이것만 알아도 반은 성공 ①
🧩 예제로 알아보는 React
🪄 지난 포스트에서 미리 본 '클릭이벤트를 통한 숫자 카운팅' 예제를 분석하며 React 속성을 빠르게 알아보겠다.
🔸 HTML5 🔸
🔹 HTML에서 React root 영역 지정 (렌더링 영역)
<body>
<div id="root"></div>
</body>🔸 React.js 🔸
👍🏻 React 필수 스크립트
🔹 react.production.min.js : 컴포넌트 생성, 상태관리(useState) 등 기능을 활용할 수 있는 리액트 핵심 라이브러리
🔹 react-dom.production.min.js : 리액트로 만든 UI를 실제 HTML에 그려주는 라이브러리로 render() 기능을 활용할 수 있다.
🔹 babel.min.js : JSX 문법을 브라우저가 이해할 수 있도록 실시간으로 변환해주는 도구. 본문에 반드시 type="text/babel"을 같이 써주어야 한다.
// React 필수 스크립트
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>👍🏻 React.useState()
🔹 useState는 컴포넌트 안에서 상태(state)를 관리하기 위해 사용하는 함수이다.
🔹 (현재 상태 값(state), 상태를 바꿔주는 함수(modifier))라는 두 개의 인수를 갖고, 배열구조분해할당을 통해 const [state, setState] = useState(초기값); 이렇게 꺼내 쓸 수 있다. state : 현재 상태 값, setState : 상태를 바꿔주는 함수 이렇게 되는 것.. 이건 React 쓰면서 정말 자주 보게 될 거니까 매우 중요바리한 개념이겠쥬?
🔹 아래 코드에서는 const [counter, setCounter] = React.useState(0); counter라는 상태 변수와 상태를 변경할 수 있는 setCounter 함수를 선언했고, counter의 초기값을 0으로 설정한 것이다.
🔹 상태를 바꿔주는 함수(modifier)는 상태가 변경될 때, 새로운 값을 갖고 컴포넌트가 재생성된다. 즉, 여러번 render을 하지 않고도 효율적인 코드 작성이 가능하다는 뜻!
👍🏻 컴포넌트 함수는 반드시 대문자!
🔹 <App /> 처럼 컴포넌트 함수는 반드시 대문자로 시작한다. 그 이유는 React가 JSX 코드 내에서 태그가 대문자로 시작하는 경우, 이를 HTML 태그가 아닌 사용자 정의 컴포넌트로 인식하기 때문이다. 즉, <app/>처럼 소문자로 작성하면 React는 이것을 HTML 태그로 읽어버린다. 따라서 <App />, App() 대문자로 작성하는 것이 규칙!
👍🏻 이벤트 함수 선언
🔹 click, change 등 이벤트 발생 시, 상태를 변경하는 함수를 실행
🔹 setCounter((current) => current + 1); 그런데 여기서 current를 인수로 받는 이유는 이전 상태값을 기준으로 새로운 상태값을 정확하게 계산하기 위해서이다. 앞으로도 이런 업데이트 함수 방식을 사용할 것이다.
👍🏻 JSX 작성 팁
🔹 <h3>Total clicks : {counter}</h3> : 카운팅 될 숫자 data를 받기 위해 { }를 활용하여 변수 값을 출력한다.
🔹 <button onClick={onClick}>Click me!</button> : onClick은 클릭 이벤트를 호출하는 것이고, {onClick}은 onClick 이름을 가진 함수를 불러오는 것이다.
👍🏻 ReactDOM.render()
🔹 리액트 요소(컴포넌트)를 실제 화면에 출력해주는 함수
🔹 ReactDOM.render(<App />, root); : (컴포넌트, 요소를 보여줄 HTML 요소) 형태로 사용
<script type="text/babel">
const root = document.querySelector('#root');
// App() : 컴포넌트 함수 (재사용 가능한 UI 조각)
function App(){
// 컴포넌트 상태 관리
const [counter, setCounter] = React.useState(0);
// click 이벤트 정의
const onClick = () => setCounter((current) => current + 1);
return (
// JSX 문법 : 상태가 변경되면 자동으로 렌더링됨
<div>
<h3>Total clicks : {counter}</h3>
<button onClick={onClick}>Click me!</button>
</div>
);
}
ReactDOM.render(<App />, root); // App 컴포넌트를 root 요소에 렌더링(그리기)
</script>🪄 React 입문 시, 배운다는 이 내용은 cdn방식 또는 vanilla 방식이라고 하는데, 요즘엔 진짜 거의 안쓴다고 합니다..ㅎ 대신 대부분 Create React App(CRA) 또는 Vite, Next.js 같은 모던 개발 환경을 쓴다고 하네요? 그럼 이걸 도대체 왜 배운건가 싶겠지만, 뭐든 기초가 탄탄해야 써먹을 수 있지 않겠습니까..ㅎ_ㅎ 눈에서 왜 땀이 나지 증말
cdn방식을 활용해서 저는 단위를 변환하는 Convert 토이 프로젝트도 진행을 해보았는데요! 이건 다음..? 다다음..? 포스팅에서 작성해보겠습니다요.
