# 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 (
		<li>{v}</li>
	);
})}

 

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

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

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

 

컴포넌트 분리와 props

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

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

const fruits = [
	{ fruit: '사과', taste: '아삭' },
	{ fruit: '바나나', taste: '달다' },
	{ fruit: '감', taste: '떫다' }
]


{this.fruits.map((v) =>
		<Try key={v.fruit + v.taste} value={v} />
)}

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

 

Try.jsx

...

<li><b>{this.props.value.fruit}</b>: {this.props.value.taste}</li>

 

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