FrontEnd 18

[React] 동적 키 이름을 가진 setState ()

첫번째 전체 키 사용 inputChangeHandler (event) { var stateObject = function() { returnObj = {}; returnObj[this.target.id] = this.target.value; return returnObj; }.bind(event)(); this.setState( stateObject ); }, ES6 또는 Babel 변환기를 사용해 JSX 코드를 변환하는 경우 -> 더욱 단순하게 사용 가능 inputChangeHandler (event) { this.setState({ [event.target.id]: event.target.value }); // alternatively using template strings for strings /..

FrontEnd/React 2021.12.28

[React] map() if문을 filter로

map()안에서 if문을 사용한 코드 const sample = [{name: "a", age: 22, role: "member", pay: 100}, {name: "b", age: 25, role: "member", pay: 120}, {name: "c", age: 30, role: "leader", pay: 130}, ]; const result = sample.map(data => { if(data.role !== "leader") return {data.name}; } ); ★ filter()를 사용하면 더 깔끔 filter() : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 const sample = [{name: "a", age: 22, role: "member", p..

FrontEnd/React 2021.12.23

[React] JSX 컴포넌트 반복 렌더링

자바스크립트 반복문을 통해 DOM에 JSX을 렌더링하고 싶을 때 return 문 안에서 for문을 사용하지 못함 방법 세가지! return문에서 JSX를 반환하는 함수 호출 JSX 루프 렌더링 시에 반드시 key값을 unique하게 할당해줍니다 - react specific - 장점: 재사용이 용이함, return문이 깔끔 // right function App() { const weekArr = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"]; const rendering = () => { const result = []; for (let i = 0; i < weekArr.length; i++) { result.push({weekArr[i] + " / "}); ..

FrontEnd/React 2021.12.23