Each child in a list shoul have a unipue "key" prop 오류 해결 방법 # Each child in a list shoul have a unipue "key" prop. 리액트에서는 여러개의 엘리먼트를 자동으로 생성할 때 생성되는 앨리먼트를 다른 것들과 구분할 수 있도록 식별자(key)를 요구합니다. 리액트 내부적으로 필요로 하기 때문에 요청하는 것이기 때문에 여러개의 데이터를 자동으로 생성할 때 유의하시기 바랍니다. 아래는 자식 컴포넌트에서 props를 리스트 형식으로 받아 자동으로 엘리먼트 여러개를 while문을 통해 만들고 있습니다. 이때{data[i].title} 에서 key(식별자) 값을 주어 에러가 나지 않도록 하였습니다. import React, { Co..
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(컴포넌트 자기 자신이 가지..
Java 자바 제네릭(Generic) # 제네릭(Generic)을 사용해야 하는 이유 첫 번째, 제네릭 타입을 사용하면 의도하지 않은 잘못된 타입이 사용될 수 있는 문제를 사전에 제거할 수 있습니다. 자바 컴파일러는 코드에서 잘못 사용된 타입 때문에 발생하는 문제점을 제거하기 위해 제네릭 코드에 대해 타입체크를 합니다. 실행 시 타입 에러가 나는 것보다 컴파일 시 타입을 미리 체크하여 에러나는 것을 사전에 방지하기 위함입니다. 두 번째, 제네릭 코드를 사용하면 타입이 지정되기 때문에 요소를 찾아 참조를 할 때 등에 타입 변환을 할 필요가 없어 코드의 정리 및 프로그램 성능이 향상되는 효과가 있기 때문입니다. 제네릭을 사용하지 않은 경우 // 제네릭을 사용하지 않은 경우 타입변환이 필요함 ArrayList..
Java StringBuffer, StringBuilder 사용법 및 차이점 - 자바 동적 문자열 - Java에서 문자열을 다루는 대표적인 클래스로 String, StringBuffer, StringBuilder가 있습니다. 연산이 많이 이루어지지 않을 때에는 어떤 클래스를 사용해도 이슈에 무방하지만, 연산이 많아지거나 멀티쓰레드 등의 상황이 자주 발생한다면 각 클래스의 특징을 이해하고 상황에 맞게 적절하게 사용해야 합니다. 1. String vs StringBuffer / StringBuilder 먼저 String은 불변의 속성을 가집니다. String str = "hello"; // String str = new String("hello"); str += "world"; // "hello world"..
자료구조 스택(Stack) 스택(Stack)의 개념 스택(Stack)이란 마지막에 들어온 데이터가 가장 먼저 나가는 LIFO(Last In First Out) 구조를 가진 자료구조(Structure)입니다. 브라우저에서 웹 서핑 중 [뒤로가기] 버튼을 누르면 가장 마지막에 들어갔던 페이지로 이동하게되죠. 이것을 예시로 이해하시면됩니다. 스택(Stack)의 연산 삭제 pop() : 스택에서 가장 위에 있는 항목을 꺼낸다. 삽입 push(item) : item을 스택의 가장 위에 추가한다. 읽기 peek() : 스택의 가장 위에있는 항목을 반환한다. 비어있는지 확인 isEmpty() : 스택이 비어있을 때 true를 반환한다. 스택(Stack)의 구현 프로그래밍은 문제의 종류에 따라 적합한 방법을 찾아 코딩..
