react

* 이 강의 내용은 코딩앙마 리액트 강의를 보고 정리한 내용입니다.(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안에 기록되어 있다. 이 폴더를 지우면 프로젝트 구동이 안되..