전체 글 102

프로그래머스 - 베스트앨범

# JAVA import java.util.HashMap; import java.util.ArrayList; import java.util.Collections; class Music { String genre; int play; int idx; public Music(String genre, int play, int idx) { this.genre = genre; this.play = play; this.idx = idx; } } class Solution { public int[] solution(String[] genres, int[] plays) { // 노래를 수록하는 기준 // 1. 속한 노래가 많이 재생된 장르를 먼저 수록합니다. // 2. 장르 내에서 많이 재생된 노래를 먼저 수록합니다. ..

React 💬16

🎈 Higher Order Component 🎈 📌 기존 구성 요소에 기능을 추가하는데 사용되는 JavaScript 기능이다. 📌 데이터를 수신하고 해당 데이터에 따라 값을 반환하는데 입력 데이터가 변경되면 HOC가 재실행된다. 📌 구성요소를 업데이트하기 위해서는 HOC를 변경할 필요는 없고, 우리 함수가 사용중인 데이터만 바꾸면 된다. 🔧 MyHOC는 MyComponent에 데이터를 전달할때만 사용 되는 함수이다. import React from 'react'; var newData = { data: 'Data from HOC...', } var MyHOC = ComposedComponent => class extends React.Component { componentDidMount() { this...

IT/React 2021.02.04

React 💬15

🎈 Animations 🎈 🔧 React에서 기본 CSS 전환 및 애니메이션을 만드는데 사용되는 추가 기능이다. 이것도 cmd에서 다운받는다. >npm install freact-addons-css-transition-group 🔧 새로운 파일인 style.css 만들자 >type nul > css/style.css 🔧 앱에서 사용가능하게 하려면, head 요소를 index.html에 연동시켜줘야 한다. 🔧 기본적인 React 컴포넌트를 만들어보자. ReactCssTransitionGroup 요소는 애니메이션을 구현할 구성요소의 래퍼로 사용된다. tran..

IT/React 2021.02.04

React 💬14

🎈 Flux 🎈 Flux는 프로그래밍 개념으로 데이터가 단방향으로 흐른다. 데이터는 앱에서 화면에 나타날때까지 단방향으로 흐르게 된다. 📌 Flux 요소들 [1] Actions : 데이터 흐름을 야기하는 작업이 Dispatcher에게 전송됨 [2] Dispatcher : 앱의 중앙 허브. 모든 데이터가 Store로 전송됨 [3] Store : 어플리케이션 state 그리고 로직이 유지되는 곳. 모든 Store는 특정 상태를 유지하며 필요할때 업데이트 됨 [4] View : Store에서 data를 받아서 앱을 다시 렌더링 함 📌 Flux 장점 - 단방향 데이터 흐름이 이해하기 쉽다 - 앱을 유지보수하기 더 쉽다 - 앱 부분들이 분리되어있다 📌 Redux Flux 패턴을 React 앱에 적용시킬 때 우리는..

IT/React 2021.02.03