본문 바로가기
React 초기 설치 명령어 2020. 4. 14. React.js를 만들 때, 필요한 초기 세팅에 대해 알아보자. Node.js(https://nodejs.org/en/) 다운 후 버전 보기 node -v // output: v12.16.1 npm -v // output: 6.13.4 아무정보도 안뜨면 node.js 재설치 리액트 폴더 생성 // 리액트폴더를 생성하고 싶은 폴더로 가서 npx create-react-app 폴더명 cd 폴더명 npm run start Router 설치 npm install react-router-dom --save SaSS 설치 npm install node-sass --save Styled-Component 설치 npm add styled-components --save
Props, State, constructor() 2020. 4. 14. Props는 컴포넌트를 사용하는 부모에서 자식으로 전달하여 사용하고, State는 컴포넌트 내부에 존재하여 상태값을 변경한다. Props State 읽기 전용(read-only) 비동기 가능 수정할 수 없음 this.setState()로 값 변경 가능 상위에서 하위로 props 전달 하위에서 상위로 event를 통해 값 전달 모두 Object이며 화면에 보여줄 정보(상태)를 갖고 있음 Props, State 값이 바뀌면 reder()가 자동으로 호출 consturctor() (생성자 함수) - class의 instance가 생성될 때 항상 호출되는 함수 - 사용할 목적이 없다면 작성하지 않아도 됨 - this.props의 정의를 위해 super(props) 호출 필수 - 초기화 할 값들을 this.sta..
Default Export, Named Export 2020. 4. 13. 리액트는 각 컴포넌트마다 export 를 해줘야 다른 곳에서 사용할 수 있다. 이때 export의 방식은 두 가지가 존재한다. import React, { Component } from 'react'; 여기서 React가 default, { Component }가 named export이다. Default Export 컴포넌트 당 하나의 default export가 존재한다. default export로 변수, 객체, 함수, 클래스 모두 올 수 있으며, 해당 컴포넌트의 제일 마지막 줄에 작성하면 된다. export default 클래스명 Named Export 반면 named export는 식별자를 통해 import가 가능하다. 위에 있는 { Component }도 react 안에 이름이 저장되어 사용할..
React Lifecycle(생명 주기) 2020. 4. 12. 리액트의 컴포넌트가 어떻게 실행되고, 어떤 순서로 호출되는지에 대해 알아보겠다. 생명주기 도표를 보면 더 자세히 볼 수 있다. 컴포넌트는 '생성 => 업데이트 => 제거'의 생명 주기를 갖고 있다. 아래 목록에서 자주 사용되는 생명주기 메소드는 색을 표시하겠다. 나머지는 상대적으로 덜 사용된다. 마운트(생성) 컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출된다. - consturctor() - static getDerivedStateFromProps() - render() - componentDidMount() 업데이트 props나 state가 변경되면 렌더(갱신)가 진행되며 순서대로 호출된다. - statis getDerivedStateFromProps() - shouldCompone..
State 2020. 4. 12. 전 글(2020/04/12 - Props)의 제일 하단에 완성된 코드를 보면 comment를 객체 형태로 선언한 것이 있다. 이 것을 해당 컴포넌트의 state, 즉 컴포넌트의 상태 값을 의미한다. See the Pen Hello World in React by Dan Abramov (@gaearon) on CodePen. Clock 컴포넌트를 통해, 스스로 타이머를 설정하고 매초 스스로 업데이트 하게 만들기 위해 함수형을 클래스형으로 바꾸겠다. 함수에서 클래스로 변환하기 1. React.Component를 확장하는 동일한 이름의 ES6 Class 생성 (ES6 Class는 추후 글 쓸 예정) 2. render() 메소드 추가 3. 함수의 내용을 render() { return ( 함수 내용 ); } 안..
Props 2020. 4. 12. class를 생성할 때 this.props라는 표현이 있었다. (2020/04/11 - React (2) - Component) 1 2 3 4 5 6 7 8 9 10 11 // function형 function Welcome(props) { return Hello, {props.name}; } // class형 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } Colored by Color Scripter cs props는 property의 줄임말로 함수에서 parameter로 해당 attribute를 받아 사용할 수 있다. .(점)으로 속성명에 접근이 가능하고, props.속성명으로 속성 값을 가..
[React/에러] Module not found: Can't resolve './node_modules/react' 2020. 4. 12. Git에서 pull해온 리액트 파일이 ./src/Components/파일명.js Module not found: Can't resolve './node_modules/react' in '경로' 라는 에러 문구와 함께 열리지 않을 때가 있다 그러면 해당 js 파일에 가서 import React, { Component } from './node_modules/react'; 를 import React, { Component } from 'react'; 로 수정하면 된다.
Component(컴포넌트) 2020. 4. 11. 리액트 관련 글을 읽다보면 Component라는 단어를 굉장히 많이 사용한다. Component(이하 '컴포넌트')는 재사용 가능한 UI 단위이다. 앞 글에서 말한 라이브러리와 같은 역할을 한다. 쇼핑몰을 예로 들면, 모든 상품 상세페이지의 레이아웃이 같다. 리액트를 배우기 전이라면, 일일히 HTML을 복사해서 붙여넣고 태그로 이동시켜야 했다. 하지만 리액트에서는 상세페이지의 틀(컴포넌트)을 만들어주면 무한히 생성이 가능하다. 이 외에도 메인페이지에서 항상 보이는 카테고리 바도 컴포넌트로 만들어서 계속 메인페이지에 띄워지게 할 수 있다. 이렇게 독립적이고 재사용 가능한 것을 컴포넌트라고 한다. Component(컴포넌트) 만들기 컴포넌트는 class나 function으로 만들 수 있으며, 컴포넌트 이름은..

티스토리툴바