Develope Me!

props는 properties의 약자로 속성 값을 의미한다. 예제를 통해서 props를 알아보자. App.js import "./App.css"; import PropsStudy from "./component/PropsStudy"; function App() { return ( ); } export default App; PropsStudy라는 컴포넌트를 만든 후 App.js에 해당 컴포넌트를 3개 추가하고 컴포넌트에 값을 전달해보자. PropsStudy.js import { useState } from "react"; const PropsStudy = function (props) { const name = props.name; const age = props.age; const [weight, s..

State는 컴포넌트가 갖고 있는 속성 값으로서 리액트에서 이벤트에 의해 변경되는 동적인 값이다. const StateStudy = function () { let name = "Mike"; function changeName() { name = name === "Mike" ? "Jane" : "Mike"; console.log(name); } return ( State Test {name} Change ); }; export default StateStudy; StateStudy 컴포넌트를 생성해주고 버튼 태그에 name을 확인해서 Mike일 때 Jane으로 변경해주고 Jane일 때는 Mike로 변경해주는 changeName 함수를 추가했다. 하지만 버튼을 눌렀을 때 콘솔에서는 이름이 업데이트 됐지만 ..

리액트는 페이지 단위로 HTML을 작성하는 것이 아닌 각 부분을 컴포넌트 단위로 조립해서 사용한다. 컴포넌트를 쉽게 이해하기 위해서 네이버 화면을 띄워서 보자 네이버 페이지를 보게 되면 검색/광고/로그인 등의 컴포넌트로 나눌 수 있다. 여기서 광고 커포넌트 같은 경우에는 어디든 비슷하게 동작할 것이기 때문에 똑같은 컴포넌트를 필요한 페이지에 스타일만 다르게 추가해서 사용 할 수 있다. 이렇게 컴포넌트 단위로 조립해서 사용하게 되면 코드 재사용이 용이하며 유지보수 또한 쉬워지게 된다. App.js import "./App.css"; function App() { const name = "리액트"; const reactInfo = { name: "react", url: "https://ko.legacy.re..

리액트를 시작하기 위해선 Node.js와 VSCode 설치가 선행되어 있어야 하는데 이미 설치되어 있으므로 바로 React 프로젝트를 생성해보려 한다. 1. React 프로젝트 생성 npx create-react-app voca 터미널에서 npx create-react-app '프로젝트명' 으로 리액트 프로젝트를 생성해준다. ※ npm과 npx의 차이 npm은 Node.js 패키지 관리자이며 npm을 사용해서 JS 패키지를 설치/관리/실행할 수 있다. npm을 사용하여 프로젝트의 의존성 패키지를 설치하고 스크립트를 실행할 수 있다. npx는 npm 5.2.0버전 이상에서 포함된 도구이며 npm 패키지를 실행할 수 있는 도구다. 로컬에 설치된 패키지나 원격 패키지를 간편하게 실행할 수 있다. ※ npm i..