본 게시글은 노마더코더의 ReactJS로 영화 웹서비스 만들기 코스를 수강하며 정리한 글입니다. creat-react-app 설치 Node.js 설치해야한다. node -v npx 실행 확인 npx create-react-app [프로젝트 이름] 리액트 서버 시작 npm start 컴포넌트를 모듈화 import React from 'react'; const Button = () => { return 버튼 } export default Button; import Button from './component/Button.js' const ButtonContainer = () => { return } Button.js를 import해 로 사용할 수 있다. 즉, 모든 컴포넌트들이 js(jsx) 파일로 되어 모듈..
본 게시글은 노마더코더의 ReactJS로 영화 웹서비스 만들기 코스를 수강하며 정리한 글입니다. Props 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법 (일종의 인자) 우리의 커스텀 컴포넌트에 HTML의 syntax를 적용시킬 수 있다. -> 데이터를 전달하는 방법 커스텀 컴포넌트를 재사용가능한 컴포넌트로 만들 수 있는 방법! function Btn(props){ console.log(text + 're render'); return {props.text} } = Btn({text:"Helo"}) text값이 props로 전달된다. Btn은 함수니깐! 이런 일이 가능하다. 단 props는 하나의 객체로써 전달되는 값들을 모두 담고있는 커스텀 컴포넌트의 유일한 인자이다. 두번째,..
본 게시글은 노마더코더의 ReactJS로 영화 웹서비스 만들기 코스를 수강하며 정리한 글입니다. State 데이터가 저장되는 공간 바뀌길 원하는 데이터가 저장되는 공간. +) React에서는 태그 전체(부모 태그 포함)가 아니라 오직 바뀐 부분만 업데이트 된다. +) {counter}로 변수 포함 가능 useState() -> [data, function] const data = React.useState() React에서 데이터를 담는 방법 const data = React.useState()로 data와 data를 바꾸는 setState function 지정 가능, 초기값 역시 지정 가능하다. State를 사용하겠다! State를 생성, 부여하는 기능 +) 배열 성분에 이름을 지정하는 방법 const..
본 게시글은 노마더코더의 ReactJS로 영화 웹서비스 만들기 코스를 수강하며 정리한 글입니다. React 기존에는 HTML에서 개체를 생성하고 이 개체와 상호작용하기 위해서는 JS의 document.getElementById나 document.querySelector와 같은 함수를 통해 HTML 객체를 가져와야 상호작용 할 수 있었다. 즉, HTML 생성 -> 자바스크립트로 가져와서 작용 그러나 React에서는 자바스크립트에서 개체를 생성하여 브라우저에서 로딩 시 HTML 태그를 알아서 생성하고 뿌려준다. 즉, 자바스크립트 생성 -> 브라우저에 뿌릴 시 HTML 생성 이로 인해 개체의 생성과 상호작용에 대한 정의가 모두 자바스크립트 안에서 이루어진다. ReactDOM React는 정확하게 말하면 어플을..
