전체 글
-
React 간단한 tab 만들어보기 (hook 활용)Programming/React 2020. 5. 13. 18:58
React hook을 활용하여 탭 기능을 만들어보도록 하겠습니다. 실습은 codesandbox를 활용했습니다. app.js import React, { useState } from "react"; import "./styles.css"; const content = [ { tab: "react", content: "컴퓨팅에서 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 리액트는 싱글 페이지나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다." }, { tab: "Node.js", content: "Node.js는 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로..
-
React shouldComponentUpdate 컴포넌트 최적화Programming/React 2020. 5. 12. 19:56
앞서 실습한 TodoList에서 shouldComponentUpdate를 사용해서 컴포넌트 최적화를 하도록 하겠습니다. 우선 앞서 실습한 코드에서 ToDoList.js 와 ToDoInfo.js 에서 console.log()를 각각 찍어보도록 하겠습니다. ToDoList.js / render 부분 render() { const { data, onUpdate, onRemove } = this.props; console.log('ToDoList가 렌더링!'); return ( {data.map((data) => ( ))} ); } ToDoList 컴포넌트가 렌더링 될 때를 알기 위해 console.log 추가 ToDoInfo.js / render 부분 render() { const { data } = this..
-
Array 메소드 slice, filterProgramming/JavaScript 2020. 5. 10. 17:31
slice 메소드 Array.slice() 메소드는 배열의 일부분, 부분 배열을 반환한다. slice()메소드에 2개의 인자를 전달해야 하는데 하나는 반환될 시작과 끝을 명시해야 한다. slice 예시 array는 index 0부터 시작하고, 시작지점부터 끝지점 전까지의 배열을 반환한다. 아래와 같이 응용해서 사용이 가능하다. Array.concat() 메소드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다. filter() 메소드 filter() 메소드는 주어진 함수의 조건을 통과한 요소들을 모아 새로운 배열로 반환하는 메소드이다. filter() 예시 화살표 함수를 사용하여 배열에 들어있는 각각의 값들을 n으로 전달받아 짝수인 경우에만 새로운 배열로 반환
-
React에서 map 메소드를 사용하여 배열 렌더링Programming/React 2020. 5. 9. 15:37
위와 같이 배열을 출력하는 방법으로는 while, for, forEach문과 같은 반복문으로 출력을 할 수 있다. 하지만 자바스크립트에서 map 메소드를 사용한다면 아래와 같이 더욱 더 간편하게 배열을 출력할 수 있다. 실습은 기존에 실습하던 코드에서 조금 수정을 하였습니다. App.js import React, { Component } from 'react'; import JoinForm from './components/JoinForm'; import './App.css'; import MemberInfoList from './components/MemberInfoList'; class App extends Component { id = 0; state = { memberInfo: [], }; han..