# 211018 TIL

# 211018 TIL

장기현장실습

띵동 관련 피드백

외부 POS 정보 입력 관련 UI 수정중 리액트에서 return 부분에서 {} 안에 자바스크립트 코드 작성 가능 위에서 선언한 함수를 작성할 경우에는 함수명 작성하면 됨 직접 선언한 함수 내부에서 return 안에 jsx 코드 작성 가능 어떤 값을 전달 받은 후에 그 값을 사용해서 함수를 작성하고자 할 때는 useMemo를 사용함 사용하는 변수를 [] 배열 안에 넣어주기

SNU 성문 분석

1:1 성문 분석에서 특정 파일 선택 후, 빈 화면이 나타나는 에러 처리 코드 commit, push 완료

리액트 학습하기

웹 게임을 만들며 배우는 React (25/64)

require과 import

require: 노드의 모듈 시스템 (common.js)

const React = require("react");

class NumberBaseball { .. } module.exports = NumberBaseball;

import: ES2015 모듈 시스템

import React from "react";

export defalut NumberBaseball → import NumberBaseball from .. export const hello → import { hello } from ..

배열 내장 함수 map

map 함수를 반복문처럼 사용할 수 있다.

반복되는 것을 배열로 만들고, 반복되는데 내부 내용만 달라질 때, 달라지는 내용이 배열의 내용이 되도록 만든다.

{['사과', '바나나', '감'].map((v) => { return ( {v} ); })}

고유하도록 key를 적어줘야 에러가 나타나지 않는다. -key의 역할: 성능 최적화할 때 사용한다.

화살표 함수에서 return 생략 가능하다.

{[ { fruit: '사과', taste: '아삭' }, { fruit: '바나나', taste: '달다' }, { fruit: '감', taste: '떫다' } ].map((v) => {v.fruit}: {v.taste} )}

컴포넌트 분리와 props

map() 안의 return 내용을 다른 컴포넌트 Try.jsx로 분리하자.

그러면 v.fruit 이렇게 접근했던 내용에서 v를 인식할 수 없기 때문에 이를 해결해주어야 한다.

const fruits = [ { fruit: '사과', taste: '아삭' }, { fruit: '바나나', taste: '달다' }, { fruit: '감', taste: '떫다' } ] {this.fruits.map((v) => )}

value={v}라고 작성한 부분을 props라고 부른다. HTML에서 attribute와 비슷한 느낌이다.

Try.jsx

... {this.props.value.fruit}: {this.props.value.taste}

직접 만드는 함수는 화살표 함수로 작성하지 않으면 this를 사용하지 못함, 화살표 함수로 작성하면 bind(this)를 해주는 것으로 포함됨

from http://dass-develop.tistory.com/60 by ccl(A) rewrite - 2021-10-19 09:26:45