까막눈코딩

1. Ancient React Create-react-app을 사용하지 않고, 초기 형태로 react app을 만들면 위와 같다. 일반적인 HTML의 script 태그를 이용해, head 부분에서 react와 react-dom을 import하고, body 부분에서 id가 root인 div 태그를 만든다. 이후 컴포넌트를 정의하고 정의한 컴포넌트를 웹에 렌더링할 script 태그를 각각 만든다. 컴포넌트를 정의할 때 React의 createElement가 사용되고, 이를 렌더링할 때 reactDOM이 사용된다. Like 즉, reactDOM은 위와 같이, 정의된 리액트 컴포넌트의 render 함수의 실행 결과(React.createElement('Button', null, 'Like'))를 document..

Knowledge/React.js 2021. 7. 8. 09:55

1. 개요 react를 이용해 영화 정보를 표시해 주는 SPA를 만들었다. create-react-app과 react-router 라이브러리를 이용해 만들었으며, 아래 컴포넌트와 스타일을 적용했다. 2. index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( , document.getElementById('potato') ); create-react-app의 index.js는, index.html과 App.js를 연결해 주는 역할을 한다. 따라서 App.js의 이름이 바뀐다면 index.js에서 render되는 App 컴포넌트의 이름도 바뀌어야 하고, index..

Knowledge/React.js 2021. 6. 29. 18:13

페이지에 들어가고, 업데이트하고, 페이지에서 나가는 각각의 과정에서 실행되는 react의 LifeCycle 함수들이 있다. 잘 사용되지 않는 getDerivedStateFromProps, 등을 제외하고 핵심적인 함수들만을 적어 보자면 아래와 같다. 1. Mounting 페이지에 들어갈 때 실행되는 함수들이다. - constructor(): 마운팅 단계에서 가장 먼저 호출되는 생성자 함수이다. - render(): 컴포넌트를 반환한다. - componentDidMount(): 컴포넌트가 render되면 호출되는 함수로, 컴포넌트가 마운트되었음을 알려준다. 2. Updating 동적으로 state의 값을 바꿀 때, 즉 setState가 호출되어 값이 변할 때 실행되는 함수들이다. - shouldCompone..

Knowledge/React.js 2021. 6. 18. 21:07

PropTypes React에서 전달받은 Props의 타입을 체크하기 위한 라이브러리이다. npm에서 PropTypes를 설치한 뒤 사용할 수 있다. Component.propTypes = { property1: PropTypes.string.isRequired, property2: PropTypes.string.isRequired, property3: PropTypes.number } 위와 같이 사용하여 해당 프롭스로 전달되는 타입을 확인할 수 있는데, property1, property2에는 string이 반드시 전달되어야 하고, property3에는 number 혹은 undefined가 전달되어야 한다.

Knowledge/React.js 2021. 6. 17. 10:26

1. State state는 해당 컴포넌트가 자체적으로 가지고 있는 객체로, 동적으로 값을 변경시킬 필요가 있을 때 사용한다. import React, { Component } from 'react'; import Child from './Component/Child'; import Counter from './Component/Counter'; class App extends Component { render() { return ( Hello, World! ); } } export default App; 우선 부모 컴포넌트에서 Counter 컴포넌트를 import하고 render 함수로 반환시킨다. import React, { Component } from 'react'; class Counter ex..

Knowledge/React.js 2021. 6. 14. 14:31

1. Props Props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 값으로 Properties를 줄인 것이다. 부모 컴포넌트의 render 함수에서, return 값에 자식 컴포넌트를 JSX 문법에 따라 반환하는데, 이 때 자식 컴포넌트의 속성으로 전달되는 값이 props이다. 자식 컴포넌트 입장에서 이 Props는 읽기 전용이며, 객체 형태로 전달된다. import React, { Component } from 'react'; import Child from './Component/Child'; class App extends Component { render() { return ( Hello, World! ); } } export default App; 부모 컴포넌트인 App에서 자식 컴포넌트인 ..

Knowledge/React.js 2021. 6. 14. 14:00

1. import React import React, { Component } from 'react'; 자바스크립트에서 리액트를 사용하기 위해서는 위와 같이 리액트를 import 해야 한다. class App extends Component { render() { return ( JSX ); }; } 컴포넌트를 만드는 방법은 class를 통해서 만드는 방식과 function을 통해서 만드는 방식이 있다. class를 통해서 만들 때는, Component를 상속받은 새로운 클래스(여기서는 App)를 만드는 것과 같다. 클래스 형태로 만들어진 컴포넌트에는 render 함수가 있어야 하며, 이 함수는 JSX를 return해야 한다. export default App; 작성한 컴포넌트를 다른 곳에서 사용하기 위..

Knowledge/React.js 2021. 6. 10. 19:42

1. 개요 다음과 같은 기능을 완성했다. 달력 - 현재 페이지에 이번 달의 날짜 및 요일 표시하기 - 현재 페이지를 넘겨 다음 달, 이전 달의 날짜 표시하기 - 휴일 및 토요일 표시하기 - 오늘 날짜에 회색 원 표시하기 - 클릭한 날짜에 파란색 원 표시하기 To-do List - 제출된 값을 로컬 저장소에 저장하기 - 로컬 저장소에 있는 값 표시하기 - 체크박스를 클릭하여 취소선 긋기 - 표시된 값을 화면과 로컬 저장소에서 제거하기 2. 현재 페이지에 표시될 날짜 구하기 const now = new Date(); let year = now.getFullYear(); let month = now.getMonth(); Date 클래스로부터 now 객체를 생성해 현재 날짜와 시간 정보를 받아오고, year, ..

Knowledge/Javascript 2021. 6. 7. 23:48