Programming/React
-
React window.confirm 기능 구현Programming/React 2020. 5. 15. 09:29
실습은 codesandbox를 이용해서 실습했습니다. window.confirm() 메소드는 위와 같이 메시지와 함께 확인 , 취소 버튼으로 구성되어있고, boolean 값을 return합니다. 확인 => true 취소 => false 를 반환하도록 되어있습니다. 실습은 가상으로 게시글을 삭제한다고 했을 때를 생각했습니다. export default function App() { return ( 게시글 삭제 ); } 위와 같이 게시글을 삭제한다고 가정하고 버튼을 클릭했을 시에 confirm으로 반환된 값들을 console.log창에 띄워 주는 함수를 작성하도록 하겠습니다. 우선 useConfirm 함수를 작성하도록 하겠습니다. const useConfirm = (message = null, onConfi..
-
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..
-
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..