리액트(React) (5) 썸네일형 리스트형 Props 란? props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용됩니다. parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용된다. props 추가하기 컴포넌트에서 변동되지 않는 데이터가 필요 할 땐, render() 메소드의 내부에 안에 { this.props.propsName } 형식으로 넣고, 컴포넌트를 사용 할 때, 괄호 안에 propsName="value" 를 넣어 값을 설정한다. Header 컴포넌트와 Content 컴포넌트가 props를 사용하도록 업데이트 해보면, props 값이 렌더링 될 위치에 { this.props.propsName } 를 넣습니다. import React from 'react'; class Header exte.. 왜 Hook 을 사용해야할까? Hook이란? 상태와 생명주기에 엮인 부수효과를 관리하는 새로운 방법이다. 즉 기존의 this.state와 componentDidMount()등의 사용을 대체한다. Hooks 는 리액트 v16.8 에 새로 도입된 기능이다. 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부른다. 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공한다. 왜 Hook을 써야할까? react를 배우는 데에 있어서 클래스는 큰 진입장벽이었다. 코드의 재사용성과 코드 구성을 어렵게 만들고, this의 사용이나 이벤트 핸들러의 등록 등 기본적인 JS 문법 사항을 알아야 다룰 수 있기 때문이다. 또한 클래스는 잘 축소되지 않고, re.. 리액트 라이프사이클이란? 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다. 라이프사이클의 분류 라이프 사이클은 위 그림과 같이 총 9개가 존재한다. 크게 세가지 유형으로 나눌 수 있는데 생성 될때, 업데이트 할 때, 제거할 때이다. 이를 리액트에서는 마운트, 업데이트, 언마운트라고 한다. 앞으로 위의 그림을 보면서 아래 글을 참조한다면 더욱 더 유용한 글이 될 것 같다. 사실 위 그림이 리액트 사이클의 전부이긴 하다. 여기서 마운트는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻하고, 반대로 언마운트는 DOM에서 제거되는.. 내가 알게된 오류들과 수정방법 Line 69:25: elements must have a unique title property jsx-a11y/iframe-has-title //iframe 은 title="" 을 가져야 한다. `No duplicate props allowed react/jsx-no-duplicate-props` //같은 괄호 안에 props 스타일이 두번 겹쳤을때 발생하는 오류 Style prop value must be an object react/style-prop-object //style 은 style={{border: '1px solid #000;'}} 이런식으로 작성해줘야 한다 만약 scss를 사용하는것이 아니라면 리액트 기본설정하기 리액트 기본 설정하기! 순서대로 차근차근! (맥북 기준) 1. Launchpad에서 터미널 검색, 터미널 오픈한다음 ls(디렉토리 정보 명령어)를 누른뒤 내가 저장하고 싶은 공간을 찾고, Desktop(내 기준에) cd(이동명령어) desktop, 그후 npxcreate-react-app react501(파일명) 명령어 입력! 2. npm/ yarn 설치하기(서로 비슷함) sudo npm install -g yarn, sudo yarn install -g yarn 둘중 하나 선택해서 설치해주면 되지만 에러가 뜬다면 sudo(관리자)를 넣고 다시 시도해보기! 3. node-sass 설치하기 npm indsall node-sass 명령어를 입력하면 간단하게 설치가 가능하다 4. react-router-do.. 이전 1 다음
