CODE (6) 썸네일형 리스트형 [React] (8) Key - Warning: Each child in a list should have a unique "key" prop. 오늘은 State를 반복문으로 자동생성할 때 주어져야하는 key값이라는 것에 대하여 알아보겠다. 우선 아래 코드는 key값을 주지 않고 만든 반복문 데이터이다. this.state에 contents를 넣어주고 TOC에 data라는 값으로 this.state.contents를 넣어주었다. App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import Content from "./components/Content" import Subject from "./components/Subject" import './App.css'; class App extends Component { // render 함수보다 먼저.. [React] (4) Component 만들기 이번 포스팅에서는 Component를 제작하는 것을 설명할 것이다. 지난번 포스팅에서 App이라는 component를 제작했는데 이번엔 다양한 Component를 만들고 src/components에 넣어 사용하는 방법과 props라는 것에 대해서도 알아볼 것이다. 우선, src폴더에 components라는 폴더를 생성한다. 그리고 아래와 같이 세 가지의 파일을 만들고 코드를 넣는다. /src/components (새로 생성한 폴더) /Content.js import React, { Component } from 'react'; class Content extends Component { render() { return ( {this.props.title} {this.props.desc} ); } } ex.. [React] (2) 생성된 폴더 각 활용 방법과 Component 변경 방법 앞선 포스트 1장을 잘 따라오셨다면 이번 장에서는 생성된 폴더의 각 파일들이 어떠한 역할을 하는지 알아보려고 한다. 위에서 보면 생선된 폴더들을 볼 수가있다. 각각 어떠한 역할을 하는지 알아보자. 언급하지 않은 파일은 현재 중요하지 않으니 넘어가도록한다. 1. /src/app.js 보시면 기본적으로 App.js가 화면을 구성하는 html역할을 App()이라는 함수에서 return하여 뿌려준다는 것을 알 수 있다. 각 내용들을 바꾸고 저장하면 localhost:3000 페이지의 내용도 바뀔 것이다. 2. /public/index.html 사실 진짜 html파일은 이곳에 저장되어 있다. 여기 보면 라는 곳이 있는데 이곳을 통해 뿌려주는 것이다. 뿌려주는 것을 정의해 주는 곳이 바로 /src/index.js .. [JavaScript] Quick Sort(퀵 정렬) Quick Sort(퀵 정렬)의 개념 Quick Sort(퀵 정렬) 구현 소스 코드 function quickSort(arr) { // arr의 요소가 하나이면 arr 자체를 그대로 반환 if(arr.length .. [프로그래머스] 약수의 합 - 자바스크립트 문제 설명 문제 풀이 function solution(n) { let answer = 0; for(let i = 1; i [프로그래머스] 문자열 정수로 바꾸기 - 자바스크립트 문제 설명 문제 풀이 function solution(s) { let answer = ''; s[0] === '+' ? answer = s.slice(1) : answer = s.slice(0); return parseInt(answer); }; slice(first Index, last index)메서드를 이용하여 문제를 풀었다. last index를 설정하지 않으면 쭉 반환한다. 실행 결과 코드 채점하고 제출 이전 1 다음
