javascript (11) 썸네일형 리스트형 React props를 이용해 재사용 가능한 컴포넌트 제작 props React에서 사용자가 새롭게 정의한 컴포넌트를 발견하면 JSX의 속성을 단일 객체로 저장하는데 이때의 객체를 props라고 부른다. Javascript에서의 객체를 생각하면 이해하기 쉬울 것이다. Javascript의 자료형 중 하나인 '객체(Object)' 객체 (Object) 객체는 자바스크립트에 존재하는 자료형 중 하나이다. 이 객체는 여러 데이터를 담을 수 있다는 점에서 배열과 비슷하나, 배열보다 담을 수 있는 데이터의 종류가 더 다양하다. { } ( ludeno-studying.tistory.com Javascript에서 HTML 태그를 불러올때 DOM을 이용해 객체로 반환되듯이, React에서 JSX에 있는 속성 값을 props에 객체로 반환되는 것이다. 객체이기 때문에 Javas.. React 개발 시작 전 기본 셋팅 React 프로젝트를 처음 생성하고 실행시키면 아래와 같이 React에서 만든 기본 페이지가 나오게 된다. 실습을 하려면 저 기본 페이지 부분을 없애야 하므로, 기본페이지 부분에 해당하는 값들을 전부 제거해 주어야 한다. 일단, 처음 React 프로젝트를 생성하게 되면 위와 같이 3개의 폴더와 4개의 파일이 생성된다. 기본페이지에서 'Edit src/App.js and save to reload.' 라고 나와있듯, 수정해야 할 곳은 src 폴더에 App.js이다. src 폴더 내부를 살펴보면 App.js 파일이 존재한다. 이 파일을 열어서 수정하면 된다. App.js import logo from './logo.svg'; import './App.css'; function App() { return ( .. 메소드에서 자신이 포함된 객체를 불러오는 'this' this 메소드 내부에서 this를 이용해 자신이 포함된 객체를 불러 올 수 있다. 메소드에서 자신이 포함된 객체의 어떤 값을 필요로 할 떄 유용하게 사용할 수 있다. this 사용법 메소드에서 자신이 포함된 객체를 호출 let Person = { name: "Carl", age: 25, Obj: function(){ console.log(this) } } Person.Obj(); // { name: 'Carl', age: 25, Obj: [Function: Obj] } 메소드 내부에서 this를 이용해 자신의 객체에 접근할 수 있다. 위의 코드에서 Person 객체에 Obj 메소드가 this를 이용해 자신이 포함되어 있는 객체를 출력하고 있다. 메소드에서 자신이 포함된 객체의 값 접근 let Perso.. 객체의 프로퍼티 값으로 함수가 들어가는 '메소드(Method)' 메소드 (Method) 메소드는 객체의 프로퍼티 값으로 함수가 들어가있는 것을 말한다. 예를 들어, 사람을 나타내는 객체가 특정한 값만을 가지고 있는것이 아니라 어떠한 행동도 하게 되는데, 그 행동이 함수인 것이다. ex) 인사하기, 달리기, 밥먹기 등등.. 이렇듯 객체도 객체에 따라 각각 수행할 수 있는 일들이 있으며, 그 수행하는 행동을 함수로 표현하는 것이다. 메소드 선언법 객체에 메소드 선언법 let Person = { Greeting: function(){ console.log('Hi'); } } /* 점 표기법으로 함수 값 넣기 Person.Greeting = function(){ console.log('Hi'); } */ 위의 코드와 같이 프로퍼티 값으로 함수를 선언하면 메소드가 만들어지는 .. Javascript의 자료형 중 하나인 '객체(Object)' 객체 (Object) 객체는 자바스크립트에 존재하는 자료형 중 하나이다. 이 객체는 여러 데이터를 담을 수 있다는 점에서 배열과 비슷하나, 배열보다 담을 수 있는 데이터의 종류가 더 다양하다. { } (중괄호) 를 이용하여 객체를 생성할 수 있으며, 이 중괄호 내부에 값을 넣게 되는데 이 때 값을 넣는 방식이 특이하다. 바로 키(Key): 값(Value) 으로 구성해서 이 값을 여러개를 넣을 수 있다. 저 데이터 쌍 하나를 프로퍼티(property)라고 부르며 여기서 키(Key) 는 '값이 가지는 이름'이다. 그리고 값(Value)는 '키 라는 이름을 가진 값'이다. : (콜론) 을 이용하여 구분하며 키가 : (콜론) 을 기준으로 왼쪽에 값이 오른쪽에 위치해 있다. 키는 부를 때 키, 식별자, 프로퍼티 .. Javascript에서 랜덤한 값 생성(난수 생성) Math.random( ) Math.random( )은 0 ~ 1 사이에서 랜덤한 부동소수점 값을 반환한다. 물론 사용자가 원하는 범위를 * (곱하기) 와 + (더하기) 를 이용해 지정하는 것이 가능하다. 기본적으로 반환값이 실수형이여서, 정수형 랜덤 값을 반환받고 싶다면, Math.floor( )를 추가로 사용해야 한다. Math.random( ) 사용법 Math.random() - 0 이상 1 미만 랜덤한 실수값을 반환 let result = Math.random(); console.log(result); // 0.7712465203639336(실행할 때마다 값은 바뀐다) 범위를 지정하지 않았을 경우 0 이상 1 미만의 값 중에서 랜덤한 값을 반환한다. Math.random() * 최댓값 - 0 이상.. 함수의 인자값으로 들어가는 함수인 콜백 함수(CallBack Function) 콜백 함수 자바스크립트에서 함수는 값 처럼 취급을 한다고 했다. 값으로 취급을 하기에 값이 할 수 있는 작업을 함수에게도 할 수있는데. 그것이 바로 콜백 함수이다. 콜백 함수는 어떠한 함수의 인자 값으로 또 다른 함수가 들어가는 것이다. 그 인자 값을 콜백 또는 콜백 함수라고 부른다. 콜백 함수 사용법 콜백 함수 function call(funcPara){ for(let i = 1; i value * value ); */ console.log(numary2); // [ 10000, 40000, 90000, 160000, 250000 ] 메소드 사용법을 살펴보자면 변수 하나를 선언하고 그 변수에 대한 값으로 numary 배열에서 map 메소드를 사용한다. map 메소드도 콜백 함수에서의 매개변수는 순서대로.. Javascript의 함수를 짧게 표현하는 화살표 함수(Array Function) 화살표 함수 자바스크립트에서 함수를 선언하는 방법인 함수 선언문, 익명 함수 이 두개의 방법 외에도 함수를 표현할 수 있는 방법이 있다. 그것이 바로 화살표 함수이다. 화살표 함수는 함수 선언문, 익명 함수와는 다르게 function구문을 사용하지 않고 화살표를 사용하기 때문에 코드의 길이가 줄어든다는 장점은 있으나, 눈에 익숙하지 않다면 가독성이 조금 떨어진다. 화살표 함수 사용법 자바스크립트에서 화살표 함수 선언법은 아래와 같다. 화살표 함수 let noPara = () => expression // 매개변수가 필요없을 시 let onePara = Parameter => expression // 매개변수가 하나일 시 let multiPara = (Parameter1, Parameter2) => exp.. 이전 1 2 다음
