훅은 함수 컴포넌트 안의 상태나 라이프 사이클을 다루기 위한 기능이다. 다루는 대상이나 기능에 따라 여러 종류가 있다. 훅의 도입에 따라 클래스 컴포넌트와 동등한 기능을 가진 함수 컴포넌트를 기술할 수 있게 됐다. 컴포넌트 안의 상태와 로직을 훅으로 추출한다. 이에 따라 컴포넌트 코드를 깔끔하게 유지할 수 있어 코드 재사용성을 높일 수 있다. 상태 훅useState하나의 새로운 상태를 작성한다. 업데이트 함수를 호출하면 상태가 바뀌고, 훅이 있는 컴포넌트는 다시 그려진다.const [상태, 업데이트_함수] = useState(초기 상태)업데이트 함수를 호출할 때 인수로 값 뿐만 아니라 함수를 호출할 수 있다. 함수를 전달하면 함수의 반환값이 다음 상태가 된다. 또한 해당 함수에는 현재 상태가 들어간다.함..
react
코드 작성 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) ? "성..
state는 컴포넌트가 가지고 있는 속성값이다. 이 속성값이 변하면 React는 자동으로 UI를 다시 그려준다.그래서 사용자 입장에서 다시 그려줄 필요가 없어 편리하다는 장점이 있다. 예제) 📁 Hello.jsexport 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 부분..
* 이 강의 내용은 코딩앙마 리액트 강의를 보고 정리한 내용입니다.(link) ✏️ Hello 컴포넌트 작성하기 src 하위에 component 디렉터리를 생성하여 내부에 Hello.js 파일을 만든다. 내용은 아래와 같다. 주석 처리 한 부분처럼 함수 표현식으로 작성하여 해당 변수를 export하도록 사용해도 되고, 혹은 한 번에 export하도록 아래 부분처럼 작성해도 된다. // const Hello = function() { // Hello; // } // export default Hello; export default function Hello() { Hello; } 🤓 만든 Hello 컴포넌트 사용하기 App.js에서 컴포넌트를 포함한다. import './App.css'; import He..
* 이 강의 내용은 코딩앙마 리액트 강의를 보고 정리한 내용입니다.(link) 🧐 컴포넌트란 리엑트로 만든 페이지는 컴포넌트들로 구성된다. 페이지들 단위로 작성되는 것이 아니라, 각 부분을 컴포넌트로 만들어서 조립해서 사용한다. 비슷한 부분은 코드를 재사용할 수 있고 유지보수가 쉬워진다는 장점이 있다. 아래의 예시를 보자. 더 자세히 쪼개자면 뉴스 컴포넌트 안에 단일 뉴스 컴포넌트, 탭 컴포넌트 ... 등으로 또 나눌 수 있다. 이런 컴포넌트는 다른 페이지에서도 재사용이 가능하다. 💻 코드로 돌아가기 import logo from './logo.svg'; import './App.css'; function App() { return ( yerang park. Learn React ); } export d..
* 이 강의 내용은 코딩앙마 리액트 강의를 보고 정리한 내용입니다.(link) 🪄 프로젝트 시작하기 프로젝트 만들기 : npx create-react-app {디렉토리 명} 웹 서버 시작하기(웹 페이지 띄우기) : npm start 서버 구동 시 자동으로 http://localhost:3000 주소를 가지는 웹 페이지가 뜨고, src/App.js 파일을 열어 수정 후 저장하면 수정 내용이 즉시 반영된다. (이걸 Hot Module Replacement, HMR이라고 부른다.) 📁 디렉토리 구성 알아보기 node_modules : 프로젝트 실행 시 사용되는 dependancy 모듈들이 모두 모여있는 곳. 여기 설치된 내용들은 package.json안에 기록되어 있다. 이 폴더를 지우면 프로젝트 구동이 안되..
