코드 작성 App.js import './App.css'; import Hello from './component/Hello'; function App() { return Props : properties ; } // 프로퍼티로 준 값이 Hello 컴포넌트에 인자로 전달됨. export default App; Hello 컴포넌트에 age라는 프로퍼티를 설정한다. Hello.js import { useState } from "react"; export default function Hello(props) { const [name, setName] = useState("Mike"); const [age, setAge] = useState(props.age); const msg = (age > 19) ? "성..
react
state는 컴포넌트가 가지고 있는 속성값이다. 이 속성값이 변하면 React는 자동으로 UI를 다시 그려준다. 그래서 사용자 입장에서 다시 그려줄 필요가 없어 편리하다는 장점이 있다. 예제) 📁 Hello.js export default function Hello() { let name = "Mike"; function changeName() { name = (name === "Mike") ? "Jane" : "Mike"; } return State {name} Change Name ; } changeName() 함수는 이름이 Mike일 때는 Jane으로, Mike가 아니면 Mike로 변경한다. 이 함수를 버튼의 이벤트 함수로 작성하여 버튼이 클릭됐을 때 태그의 내용이 바뀌도록 했다. 💥근데, 버튼을 ..
* 이 강의 내용은 코딩앙마 리액트 강의를 보고 정리한 내용입니다.(link) 버튼에 이벤트를 추가하는 예제를 통해 이벤트 처리하는 방법에 대해 알아보자. 우선 아래와 같이 Hello.js의 내용에 태그를 추가한다. export default function Hello() { return Hello Show name Show age ; } 방법 1. 함수 showName() 함수를 추가하여, 버튼의 onClick 옵션으로 넣어준다. 여기서 주의할 점은 중괄호 내부에 showName이 아닌 showName()을 작성하게 되면 showName() 함수가 반환하는 값이 들어가게 되어, undefined가 반환되므로 주의하자. export default function Hello() { function show..
* 이 강의 내용은 코딩앙마 리액트 강의를 보고 정리한 내용입니다.(link) 1. 인라인 스타일 사용하기 태그에 스타일 옵션을 이용하여 스타일을 적용하는 방법이다. 단, 스타일 옵션의 값은 객체가 들어가야 하므로, 중괄호가 2중으로 작성되어야 한다. (코딩앙마님 강의와는 다르게 보기 편하도록 컴포넌트를 임의로 하나 추가했다.) 📁 CssStyleTest.js export default function CssStyleTest() { return StyleTest inline style ; } 여기서 주의할 점이 몇 가지 있다. 스타일의 옵션 이름을 background-color와 같이 dash(-)를 사용하지 말고, backgroundColor와 같이 Camel 케이스로 작성해줘야 한다. value 부분..
