까막눈코딩

1. Webpack 웹팩은 여러 개의 .js, .jsx 파일을 하나의 .js 파일로 만들어 주는 역할을 한다. 웹팩의 설치 방법은 다음과 같다. npm init 해당 폴더에서 npm을 실행시킨다. name, author, license 등을 적당히 입력하면 package.json 파일이 생성된다. 다시 npm을 통해 필요한 패키지를 설치하면 package.json이 업데이트된다. npm i react react-dom react와 react-dom을 설치한다. npm i -D webpack-cli webpack-cli를 설치하되, D 옵션(devDependencies)을 통해 개발 시에만 이를 사용하고, 실제 배포 시에는 사용하지 않는다는 옵션을 추가한다. 이렇게 react, react-dom, webp..

Knowledge/React.js 2021. 7. 19. 23:45

1. Functional Component 함수형 컴포넌트는 초기에, state나 ref를 쓰지 않는 경우에 사용되었다. 그러나 이제는 함수형 컴포넌트에서도 state와 ref를 사용할 수 있게 되었는데, 이것이 Hooks이다. 클래스형 컴포넌트로 만든 구구단 게임을 함수형 컴포넌트로 리팩토링했다. const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9)); const [second, setSecond] = React.useState( Math.ceil(Math.random() * 9) ); const [value, setValue] = React.useState(""); const [result, setResult] = React.us..

Knowledge/React.js 2021. 7. 19. 17:31

1. Multiplication Game 랜덤으로 두 개의 숫자를 전달하고, 사용자로부터 숫자를 입력받아 곱셈이 맞는지를 체크한 뒤 '정답' 혹은 '땡'을 출력하는 게임(...)이다. 2. React Code 이를 constructor, render, onSubmit으로 나누어 보면 아래와 같다. constructor(props) { super(props); this.state = { first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random() * 9), value: "", display: "", result: "", }; } 컴포넌트의 constructor에 this.state 객체를 생성하고, 바뀔 여지가 있는 것들을 state로 설정하여..

Knowledge/React.js 2021. 7. 8. 17:32

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