beMajor

useEffect는 componentDidMount, componentDidUpdate, componentWillUnmount 와 비슷하다. 3가지 경우를 전부 포함하는 느낌이다. componentDidMount 역할을 해서 새로고침하면 호출되고, componentDidUpdate 역할을 해서 새로 렌더링 되어도 호출된다. useEffect는 2개의 인자를 받는데 첫 번째는 function으로써의 effect이다. 두 번째 인자는 dependency이다. 만약 deps가 있다면 effect는 deps리스트에 있는 값일 때만 값이 변하도록 활성화될 것이다. dependency는 componentDidUpdate의 호출을 제어하고 싶을 때 사용한다. 자세한 예시는 아래와 같다. useEffect(functi..

useState는 항상 배열을 반환한다. const [value, setValue] = useState(0); 배열의 첫 번째 요소는 value를 초기화 하는 값이고 배열의 두 번째 요소는 value를 바꾸는 함수이다. setValue를 너무 어렵게 생각하지말고, 인자로 넘겨주는 값으로 value를 바꿔준다고 생각하면 된다. 클래스에서 메소드로 state를 setter로 관리하는 식으로 생각하면 편해. useState는 아래 처럼 쓸 수도 있음 useState(0)[0]

gh-pages를 사용해 내가 만든 웹사이트를 빌드해서 배포할 수 있다. 깃허브에서는 리퍼지토리에 무료로 웹사이트를 빌드하게 해주는데, 주소는 다음과 같다. https://{github아이디}.github.io/{repository_name} gh-pages 설치 먼저 gh-pages를 설치한다. npm i gh-pages 이후 프로젝트 폴더의 package.json 파일을 수정해준다. (1) hompage 프로퍼티 추가 ... ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "homepage": "https://sweethoneybee.github.io/movie_app/"..

프로젝트가 커짐에 따라 타입체킹을 통해 버그를 잡는 것은 중요해질 것이다. 내가 받은 props가 number이어야 하는데 string일 수도, 반대의 경우도 있을 수 있고 또 아예 전달을 받지 못하는 경우도 있을 수 있다. 이런 것을 방지하기 위해 부모 컴포넌트에서 props를 받는 경우 내가 원하는 props를 받았는지를 검사할 필요가 있다. 검사를 위해 prop-types를 사용한다(예전에는 리액트에 포함된 패키지였는데 이제는 별도의 라이브러리로 존재하기에 사용하려면 설치해주어야 한다) 먼저 설치는 다음과 같이 한다. npm i prop-types 사용방법은 다음과 같다. import PropTypes from "prop-types" // 반드시 propTypes를 추가하여야 한다. // 다른 이름..

javascript에서 data를 fetch하는 방법은 보통 fetch를 사용하는 것이다. 이번에는 axios 라는 것을 사용해볼 것이다. axios는 마치 fetch 위에 있는 작은 layer이다. axios를 사용하기 위해서는 먼저 설치해야하니, 다음과 같이 입력해서 설치한다. npm i axios axios에서 url을 통해 데이터를 가져오는 방법은 다음과 같다. import axios from "axios" const datas = axios.get("URL"); axios는 전달받은 url에서 promise 객체(데이터)를 가져올 것이다.

우리가 아는 객체처럼 리액트에서 component class 역시 life cycle이 있다. 처음 태어나는 것을 mount라고 하고, 죽는 것을 unmount라고 표현한다. constructor부터 시작해서 여러 가지 있지만 주로 사용되는 것 위주로 보자면 (순서대로 호출 된다) 컴포넌트 생성시 호출되는 것들 constructor() componentDidMount() render() 컴포넌트 업데이트시 호출되는 것들(setState 메소드를 호출할 때만 업데이트 된다) render() componentDidUpdate() 컴포넌트가 죽을 때(우리가 다른 웹사이트로 이동할 때임) componentWillUnmount 이 메소드들은 React.Component에 있는 메소드들이다. 우리는 React.Co..

React에는 class component가 있다. 우리는 React.Component를 상속받아서 class component를 만들 수 있다. class App extends React.Component { render() { return ( 안녕! 난 HTML이야! ); } } React는 자동으로 이 class의 render() 메소드를 호출하고 render() 메소드만을 사용한다. render() 는 기존 function component처럼 HTML을 반환하는 메소드이다. state는 class component 안에 있는 오브젝트이다. render() 메소드 내에서 state에 접근하고 싶을 때는 this를 사용하여 접근한다. render() 메소드 내에서 class component의 다른..

리액트는 node.js, npm, npx 깔려 있으면 프로젝트 만들고 서버 생성해보고 쉽게할 수 있음 node.js는 버전 12 이상. npm, npx는 버전 6 이상. cmd창에서 원하는 폴더로 이동하고 다음과 같이 입력하면 해당 폴더에 react 프로젝트를 생성할 수 있음 npx create-react-app 이름 그리고 npx로 서버 실행해보려면 다음과 같이 입력함(끌 때는 해당 콘솔창에서 ctrl + c로 끌 수 있음) npm start component: HTML을 반환하는 함수 jsx: HTML + javascript 리액트는 index.html 소스에 컴포넌트를 사용해서 동적으로 html을 삽입함. index.js 에서 DOM 쿼리를 이용해 삽입할 div를 찾아서 삽입하는 것. index.j..