본문 바로가기

Wook's 개척일기234

[React 기초] State 란? State state는 값을 변수에 할당해서 값을 넣는 방식을 관리하는 것이다. 소스를 통해 한번 확인해보자 ex) class App extends Component{ state = { sampleText : 'Hello World' } render(){ return( {this.state.sampleText} ) } } 위처럼 state라는 state에 sampleText라는 변수를 만들면 render()안에서 {this.state.sampleText} 를 통해서 해당 변수를 호출이 가능하다. 위에서 state는 state 변수명이므로 내가 아무렇게나 설정이 가능하다 sta = {} 이렇게도 설정이 가능한것이다. 다만 사용할때는 변수명에 맞게 this뒤에 붙여야 된다. (state안에 있는 변수명 내가.. 2021. 5. 12.
[ES6 기초] 상속 상속도 자바와 거의유사하다. 소스를 통해서 보자. class Person { constructor(name,gender){ this.name = name; this.gender = gender; } greetings(val = '안녕'){ console.log(val); } } let wook = new Person('이욱재','남자'); console.log(wook); wook.greetings(); class Korean extends Person { constructor(name,gender, eyeColor, hairColor){ super(name,gender); this.eyeColor = eyeColor; this.hairColor = hairColor; } greetings(val = '.. 2021. 5. 11.
[ES6 기초] class 설명 class 클래스는 자바의 클래스와 거의 유사하다. 하지만 다른점이 있다면 자바는 안에 멤버변수를 따로 만들어 줬어야 했지만 자바스크립트는 따로 만들어 주지 않고 생성자만 만들어도 된다. ex) class Person { constructor(name,gender){ this.name = name; this.gender = gender; } greetings(val = '안녕'){ console.log(val); } } let wook = new Person('이욱재','남자'); console.log(wook); wook.greetings(); 결과 Person {name: '이욱재', gender: '남자'} 안녕 이처럼 멤버변수를 만들지 않아도 this.멤버변수 를 써서 멤버변수안에 집어넣는거 같다. 2021. 5. 11.
[ES6 기초] Arrow function Arrow Function 이건 우리가 react 하면서 자주 봤던건데 =>를 사용하는것이다. 간단하게 소스를 통해서 확인해보자. let arr = [1,2,3,4,5] let arr2 = arr.map(v=>v*2); console.log(arr2); 결과 (5) [2, 4, 6, 8, 10] 이렇게 된다. 일단 위소스에서 map이란 함수는 javascript에서 배열안에 내재되어 있는 함수인대 해당 함수는 배열 내의 모든 요소에 접근해서 해당 요소에 대한 함수를 호출하고 호출한 배열 요소 결과를 모아 배열로 리턴하는것이다. 위와 같은 경우로 봤을땐 각각의 배열 요소 안에 접근에 *2를 시키는 함수를 호출해 그 결과들을 모아 배열로 반환한것이다. 위소스를 함수 모양으로 바꾸게 되면 아래와 같다. ex).. 2021. 5. 11.

티스토리툴바