혼자 적어보는 노트

Lifecycle 모든 component는 여러가지의 생명주기 메소드(lifecycle method)를 가진다. 대표적인 것만 적어보겠다. Mount 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출 - constructor() component가 mount되기 전에 호출 constructor(props) { super(props); this.state = {date: new Date()}; } constructor() 를 구현할 때에는 super(props)를 호출해야 한다. * constructor() 내부에서 setState()를 호출하면 안된다. state가 필요하다면 생성자 내에서 this.state에 초기 state 값을 할당하면 된다. - render() - compone..

class Components and state state는 보통 동적 데이터와 함께 작업할 때 만들어진다. Class 만들기 class App extends React.Component{ render(){ return Hi hello } } React.component는 return이 아닌 render method를 가지고 있다. function component는 함수이고 return을 한다. class component는 class이고 react component로 부터 extend된다. 그리고 render method안에 넣어야 한다. Class에서 로컬 State 생성하기 class component안에서는 state를 사용할수 있음 state는 object, 동적인 데이터를 넣을 공간이다. c..

Prop-types란 전달받은 props가 내가 원하는 props인지 확인해주는 package. 구성 요소에 전달된 속성의 의도한 유형을 정해줄 수 있다. 구성요소에 전달된 데이터를 확인하고 일치하지 않는 경우 개발 단계에서 경고를 띄워 줌. npm i prop-types //설치 import PropTypes from "prop-types"; npm install을 이용해 설치 해주고 파일 위에 선언 해준다. const fruitList = [ { id: 1, name: "orange", price: "2,000", store: 3 }, { id: 2, name: "apple", price: "3,000", store: 5 }, { id: 3, name: "grape", price: "4,000", s..

데이터에 따른 반복되는 Component 표현 - map() 반복되는 component를 렌터링 하기 위해서는 javascript의 내장 함수인 map()을 사용한다. map함수는 파라미터로 전달된 함수를 사용해 원하는 규칙에 따라 변한한 다음 새로운 배열을 생성하는 함수이다. const fruitList = [ { name: "orange", price: "2,000" }, { name: "apple", price: "3,000" }, { name: "grape", price: "4,000" }, { name: "banana", price: "5,000" } ] fruitList라는 간단한 object를 만들어 보았다. 이 fruitList의 데이터를 토대로 javascript의 map()함수를 이용하..

React의 props에 대한 이해. jsx에선 component에 정보를 보낼 수 있다. 컴포넌트에서 컴포넌트로는 물론 컴포넌트에서 children component로 정보를 보낼 수 있다. 정보를 보내기 위해서는 아래와 같은 방식을 사용한다. content라는 component에 name이라는 property에 first라는 값을 주었다는 뜻. 이렇게 지정한 property들을 props라고 부른다 function App() { return ( hi hello ); } 예를들면 이런식으로 props name과 value를 마음대로 설정할 수 있고 여러개의 props를 전송할 수 있다. function Content(props) { console.log(props); return hey } // Obj..

JSX란? javascript안의 HTML이라고 볼 수 있다. javascript와 HTML사이의 이 조합을 jsx라고 부른다. (react에서만 있는 개념) JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법이라고 볼 수 있다. Component function App() { return ( hi hello ); } component는 위와 같이 React 엘리먼트를 반환하는 함수이다. javascript 함수이기 때문에 말 그대로 함수 컴포넌트라고 한다. react는 여러가지의 component를 만들 수 있다. *component명은 대문자로 생성해 주는 것을 원칙으로 한다. 컴포넌트 생성 및 다중 컴포넌트 렌더링 component를 만들 때는..

React 세팅 리액트를 사용하기에 앞서 필요한 것은 아래와 같다 node.js / npm / npx node.js는 해당 사이트에서 운영체제에 맞게 설치가 가능하고, npm은 node.js설치시 자동으로 설치가 된다. npx는 cdm에서 npm install npx -g로 설치가 가능하다. git도 함께 설치해서 진행하는것이 좋다. node -v npm -v npx -v 설치후 위의 명령어를 입력하여 version을 확인함으로 설치가 제대로 완료되었는지 확인할 수 있다. 설치 완료 후 cd Documents로 가서 명령어를 사용하여 리액트 aplication을 생성해 주어야 한다. npx create-react-app [App-name] React 동작 방식에 대한 이해 생성된 react create ..