📌 State란 ?컴포넌트 내부에서 바뀔 수 있는 값을 의미하며 state의 변화를 감지하여 리렌더링을 수행합니다. state는 어떤 타입이든 상관 없으며 여러개일 수도 있습니다. 클래스형 컴포넌트와 함수형 컴포넌트에서 사용하는 방법은 다릅니다. 함수형 컴포넌트에서는 훅 Hook개념을 이용해서 더욱 쉽게 사용 가능합니다. useState는 함수형 컴포넌트에서만 사용할 수 있는 hook으로 배열을 반환하는 함수입니다.[0]번째에는 현재 데이터, [1]번째에는 값을 변경하는 setter함수가 위치하는데 아래의 코드를 확인합니다.let result = useState('초기값'); //--- 구조분해할당 전let data = result[0]; //--- datalet setData = result[1]; ..

📌 컴포넌트란 ?리액트의 컴포넌트는 트리형 구조로 함수형, 클래스형으로 분류됩니다. 함수형 컴포넌트에 대해서 살펴보겠습니다.⓵ 하위컴포넌트에 외부에서 사용할 모듈 이름을 지정하고 ⓶ 상위컴포넌트에서 모듈을 불러오는 방식을 사용합니다.📍--- App.js (상위)function App() { return ( );}export default App;📍--- NewJeans.js (하위)function NewJeans(props) { return Hello! {props.name};} NewJeans를 여러번 렌더링 하는 App컴포넌트를 만들 수 있으며 이를 컴포넌트 합성이라고 하는데 코드의 재사용성을 높일 수 있습니다. 위와 같이 ..

📌 JSX란 ?JS의 확장 문법으로 html에 js 코드를 녹여낸 확장자의 형태입니다. 코드를 수정하면 자동으로 리렌더링됩니다. (webpack의 역할)이때, Webpack Loader는 직접 설치 및 설정 가능하고 보일러플레이트로 생성 시 자동으로 설정됩니다. Webpack Loader는 다양한 종류가 있습니다.- css 로더 : css를 로드합니다.- file 로더 : 폰트, 이미지, 파일 등을 로드합니다.- babel 로더 : ES6문법을 ES5문법으로 다운그레이드합니다. (webpackConfig.js)   📌 JSX 문법✔︎ VS Code(Visual Studio Code)에서는 Alt + Shift + A를 사용하여 JSX 주석을 작성할 수 있습니다.{/* JSX의 주석은 이렇게 사용합니다..

📌  리액트(React) 란? 리액트는 자바스크립트 라이브러리입니다. 구조가 MVC, MVVM과 같은 다른 프레임워크와는 다르게 오직 View만 처리합니다.  📌 SPA (Single Page Application) 란 ?ndex.html하나만 로드하고 실행시키는 구조이며 nodeJs의 Webpack이 이용됩니다. (프로젝트를 생성하면 자동 포함됩니다.)이때, Webpack이란 ? 어플리케이션을 동작시키는데 필요한 자원(JS파일, CSS, Image 등)을 하나로 묶어 경량화하여 결과물을 만들어주는 도구입니다.   📌 DOM (Document Object Model) 이란 ? DOM은 HTML 문서 구조의 계층을 표현하기 위해 트리 구조로 만들어진 객체이며 하나의 최상위 노드(Node)에서 다른 자..