전체 글

React에서 이벤트 처리 정리 및 예제 - onClick, bind, setState # 리액트(React)의 이벤트 문법 리액트에서는 함수명을 카멜케이스로 작성하고 onclick(전부 소문자)으로 사용하는 자바스크립트와 달리 onClick 으로 사용합니다. # 이벤트 기본 동작 방지 클릭하세요 태그에 onClick 이벤트를 설정하면 기본적으로 href로 페이지를 이동하는 기본 동작이 있습니다. e.preventDefault(); 를 사용하여 이를 동작하지 않게 하고 onClick에 넘겨준 것만 실행할 수 있게 해줍니다. function clickEventFunc(e){ e.preventDefault(); console.log('페이지 이동 없이 클릭'); } event를 인자로 받아 e.prevent..

React 리스트(배열) 데이터 여러 개 출력하는 방법 React에서 리스트(배열) 데이터를 props로 받아 여러개의 데이터를 jsx 파일에서 출력, 렌더링하는 방법을 알아보겠습니다. # React 리스트 타입 데이터 여러개 출력하는 방법 ① contents 라는 state에 데이터를 리스트(배열) 형식으로 저장해 두고 자식 컴포넌트인 TOC 컴포넌트에 props로 데이터 값을 전달합니다. App.js - 부모 컴포넌트 import React, { Component } from 'react'; import TOC from "./components/TOC" import Content from "./components/Content" import Subject from "./components/Subjec..

1. React - props와 state 개념 리액트 컴포넌트에서 다루는 데이터는 props와 state 두가지로 나뉩니다. 또 리액트에서는 props의 값이나 state의 값이 바뀌면 해당되는 component(컴포넌트)의 render(){} 함수가 호출되도록 약속되어 있습니다. 그말은 즉, props나 state가 바뀌면 화면이 다시 그려진다 라는 말입니다. props와 state 개념 props(읽기 전용) props는 부모(상위) 컴포넌트가 자식(하위) 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props를 받아오고 받아온 props를 직접 수정하는 것은 불가능합니다. 하위 컴포넌트에서 상위 컴포넌트의 값을 변경하고 싶을 때에는 event를 사용합니다. state(컴포넌트 자기 자신이 가지..

React Developer Tools (디버깅 툴) - 크롬 확장 프로그램 설치 방법 크롬에서 리액트 디버깅 툴 설치 방법을 알아봅시다. React 사용시 개발자모드 Elements 탭에서는 브라우저가 이해하는 코드를 보여주기 때문에 우리가 React를 사용하여 스크립트로 작성한 컴포넌트 구조를 정확히 볼 수 없습니다. React Developer Tools를 사용하게 되면, 크롬 웹에서 개발자 모드로 컴포넌트(Components) 구조를 볼 수 있고 변경하면서 테스트에 용이합니다. 1. 크롬 리액트 디버깅 툴 설치 Link chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Devel..

백준 알고리즘 2884번 Java 풀이 - 알람시계 www.acmicpc.net/problem/2884 2884번: 알람 시계 상근이는 매일 아침 알람을 듣고 일어난다. 알람을 듣고 바로 일어나면 다행이겠지만, 항상 조금만 더 자려는 마음 때문에 매일 학교를 지각하고 있다. 상근이는 모든 방법을 동원해보았지만, www.acmicpc.net 문제 상근이는 매일 아침 알람을 듣고 일어난다. 알람을 듣고 바로 일어나면 다행이겠지만, 항상 조금만 더 자려는 마음 때문에 매일 학교를 지각하고 있다. 상근이는 모든 방법을 동원해보았지만, 조금만 더 자려는 마음은 그 어떤 것도 없앨 수가 없었다. 이런 상근이를 불쌍하게 보던, 창영이는 자신이 사용하는 방법을 추천해 주었다. 바로 "45분 일찍 알람 설정하기"이다. ..

문자열 내림차순으로 정렬하기 - 프로그래머스 Java URL programmers.co.kr/learn/courses/30/lessons/12917 코딩테스트 연습 - 문자열 내림차순으로 배치하기 문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요. s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 programmers.co.kr 문제 설명 문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요. s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다. 제한 사항 str은 길이 1 이상인 문자열입니다. 입출력 예 s ret..

Java 자바 제네릭(Generic) # 제네릭(Generic)을 사용해야 하는 이유 첫 번째, 제네릭 타입을 사용하면 의도하지 않은 잘못된 타입이 사용될 수 있는 문제를 사전에 제거할 수 있습니다. 자바 컴파일러는 코드에서 잘못 사용된 타입 때문에 발생하는 문제점을 제거하기 위해 제네릭 코드에 대해 타입체크를 합니다. 실행 시 타입 에러가 나는 것보다 컴파일 시 타입을 미리 체크하여 에러나는 것을 사전에 방지하기 위함입니다. 두 번째, 제네릭 코드를 사용하면 타입이 지정되기 때문에 요소를 찾아 참조를 할 때 등에 타입 변환을 할 필요가 없어 코드의 정리 및 프로그램 성능이 향상되는 효과가 있기 때문입니다. 제네릭을 사용하지 않은 경우 // 제네릭을 사용하지 않은 경우 타입변환이 필요함 ArrayList..

문자열(알파벳) 대문자/소문자로 변환 1. toUpperCase() toUpperCase() 메서드는 문자열의 모든 알파벳을 대문자로 변환합니다. String str = "hello World"; System.out.println(str.toUpperCase()); // "HELLO WORLD" 2. toLowerCase() toLowerCase() 메서드는 문자열의 모든 알파벳을 소문자로 변환합니다. String str = "hello WORLD"; System.out.println(str.toLowerCase()); // "hello world"