Front/React (14) 썸네일형 리스트형 React - Dom과 컴포넌트에 접근하는 방법(Refs) React에서는 Dom에 접근할때, document.querySelector 와 같은 api를 사용하지 않고 Ref를 이용한다!! Ref 사용방법 Ref를 생성해서, 생성된 ref에 원하는 돔 엘리먼트를 저장 저장 후 this.(ref이름) 으로 사용. 아래 코드 참고! -------------------------------------------------------------------------------------------- Class textForm extends Component { inputRef = React.createRef(); // Ref생성 focusTextInput = () => { this.inputRef.current.focus(); } render() { return ( /.. React - 프로젝트 시작하기 (터미널명령어) & 컴포넌트 생성 및 작성 터미널 명령어 1. yarn으로 react-app 생성하기 프로젝트 폴더를 만들고자 하는 위치로 디렉토리를 설정하고 아래 명령어를 입력한다. >> yarn create react-app 프로젝트폴더명 2. 폴더를 통째로 복사하기 templete 폴더를 habit-tracker 로 복사한다. >> cp -R templete habit-tracker 2. 코드 열기 (편집기로) 코드를 열기를 원하는 프로젝트 폴더로 디렉토리를 설정하고 아래 명령어를 입력한다. >> code . 리액트 기본 폴더 구조 public 폴더 : 정적인 파일, static한 것들 src 폴더 : 동적 파일 (자바스크립트 코드), dynamic한 것들 * 웹팩에서는 빌드할때마다 자바스크립트의 유니크한 고유의 버전이 할당 된다. 그래서 .. 리액트 (클래스컴포넌트 vs 함수컴포넌트) 클래스 컴포넌트 state와 lifecycle methods가 있다. 함수 컴포넌트 state와 lifecycle methods가 없다. react16.8부터 React Hook을 도입하여 state와 lifecycle methods를 사용할 수 있도록 했다. 클래스 컴포넌트 대신 함수 컴포넌트를 사용하는 이유 (클래스 컴포넌트의 단점) 클래스 컴포넌트는 어렵다. 클래스 컴포넌트에는 this bind issue가 있다. functional programming을 이용하기 위해. lifecycle methods가 세분화 되어있어 코드를 중복으로 사용하는 경우가 발생했는데, 그 중복을 줄일 수 있다. 출처 드림코딩 엘리 - 리액트 4.1 강의 React - tool install (nvm, node.js, homebrew, yarn) / in Mac OS 참고 velopert.com/3621 명령어 라인 도구 (Command Lind Tool) mac 구매 후 처음 사용하는 상황이라 설치가 안되어 있었음. nvm 설치 시 설치 메시지가 나왔을 때, 허락하여 자동으로 설치. nvm (node version manager) node.js 설치를 위해 설치함. * 설정파일에 설정 추가 vi ~/.zshrc export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" export PATH=/opt/homebrew/bin:$PATH *.. React - 데이터의 변화 (props, state) props 부모가 자식한테 전달해주는 데이터 (읽기전용) state import React, { Component } from 'react'; class Counter extends Component { state = { number: 0 }; // 화살표 함수가 아닌 일반 함수로 정의할 경우 this가 뭔지 인식하지 못함. handleIncrease = () => { // this.state.number = this.state.number + 1; // 이렇게 하면 state값이 업데이트 됐는지를 Component 자신이 모른다. this.setState({ number: this.state.number + 1 }); }; handleDecrease = () => { this.setState({ num.. React 첫 시작. JSX 문법 사용, 렌더링, 조건부 렌더링 JSX 문법 HTML과 비슷하지만 꼭 지켜야 할 규칙이 있다. 1. 태그는 꼭 닫혀있어야 한다. (self closing tag 사용 가능. ) 2. 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 한다. ** 의미없이 태그를 낭비하지 않고, 라는 태그를 이용하면 html에서는 태그가 보이지 않는다. 빈 태그도 fragment와 같은 역할을 한다. 조건부 렌더링 1. 삼항연산자 사용 { 1 + 1 === 2 ? '맞다' : '틀리다' } 괄호안에서 삼항연산자 사용 가능. 2. & 연산자 사용 { name === 'green' && '그린이다~~' } 3. IIFE 방식 (함수를 선언한 다음 바로 호출) ** 화살표 함수(ES6문법) : this, arguments, super 의 개념 없음. 이전 1 2 다음
