[React] React 완벽 가이드 - 시작하기
2024, Oct 16
React.js란 무엇인가
- The library for web and native user interfaces (https://react.dev/)
- JavaScript 라이브러리 라는 특성때문에 페이지를 재로딩 없이 업데이트 할 수 있음
- JavaScript는 웹사이트가 백그라운드에서 실행되며 로딩이 완료된 페이지를 읽고 조작할 수 있음
- 빠르고 부드러운 화면 전환이 가능함~
왜 React를 사용해야 할까?
- JavaScript만 쓰는건(Vanilla JavaScript) 복잡한 구조에는 바람직하지 않음
React.js와 Vanilla JavaScript 비교
Vanilla JavaScript
- index.html 파일에 화면요소를 작성함
- 각 버튼도 이벤트리스너를 작성해주어야함
- 단계를 직접 정의해주는 명령형
React.js
- 선언형
-
코드가 더 간결하다.
- index.html 파일에 거의 내용이 없음
-
<body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body> <div id="root">-> js에서document.getElementById("root");로 가져와서 사용하면 됨
-
- js 파일에서 html 코드를 사용할 수 있음
- html 코드 안에 동적코드를 섞어서 사용할 수 있는게 장점
activeContentIndex변수값에 따라 탭을 조정-
<div id="tabs"> <menu> <button className={activeContentIndex === 0 ? "active" : ""} onClick={() => setActiveContentIndex(0)} > Why React? </button> <button className={activeContentIndex === 1 ? "active" : ""} onClick={() => setActiveContentIndex(1)} > Core Features </button> <button className={activeContentIndex === 2 ? "active" : ""} onClick={() => setActiveContentIndex(2)} > Related Resources </button> </menu> <div id="tab-content"> <ul> {content[activeContentIndex].map((item) => ( <li key={item}>{item}</li> ))} </ul> </div> </div>
-
첫 번째 리액트 앱 편집하기
버튼 추가하기
<button
className={activeContentIndex === 3 ? "active" : ""}
onClick={() => setActiveContentIndex(3)}
>
React vs JS
</button>
코스 소개 및 개요
- 코드 참고 깃허브