JongDDA의 한걸음 한걸음씩

프로퍼티는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. 이때 프로퍼티값은 수정할 수 없다는 특징을 가진다. 예제) class App extends React.Component{ render(){ return( ); } } Mycomponent 컴포넌트에서는 name 이라는 이름의 전달받은 "message"라는 문자열값을 render() 함수에서 참조할 수 있다. 코드를 보면 render() 함수에서 this.props.name으로 프로퍼티값을 참조하고 있다. class MyComponent extends React.Component{ render(){ const name = this.props.name; return {name}; } } 여기서 중요한 것은 프로퍼티가 상위 컴포넌트에서 하위..

웹 페이지를 보시면 다양한 슬라이드를 많이 볼 수 있을 텐데요 그런 슬라이드들을 어떻게 만드는지 순수 자바스크립트만으로 하나, 제이쿼리를 이용한 거 하나, 이렇게 2가지 방법으로 기본틀을 만들어 보겠습니다. 1. 순수 JavaScript 만으로 HTML CSS html,body{ margin:0;} #container{ width: 640px; margin: 0 auto;} h1{ text-align: center;} .album{height: 400px; width: 100%; overflow: hidden;} /* overflow 되면 숨긴다*/ .images{ display: flex; height: 400px; width: 2560px; transition-property: transform; /..

컴포넌트의 생성부터 소멸까지의 과정을 컴포넌트의 생명주기(Lifecycle)라고 한다. 컴포넌트는 생명주기마다 함수를 가지고 있는데 이 함수들을 이용하면 특정 시점에 원하는 동작을 하도록 만들 수 있다. 생명주기 함수는 render()함수를 포함하여 총 8종의 함수가 있다. 생명주기 함수는 리액트 엔진에서 자동으로 호출한다. 다음은 컴포넌트의 생명주기를 그래프로 그린 것이다. 점선으로 표현한 화살표 끝에 표시간 것이 생명주기 함수의 이름이다. 컴포넌트 생성부터 생성 완료까지 4개의 생명주기 함수가 호출된다. 이 과정을 생성 과정이라 부른다. 이후 생성 롼료부터 갱신완료까지 5개의 생명주기 함수가 호출된다. 이 과정을 갱신과정이라 한다. 갱신 완료부터 소멸 완료까지는 1개의 생명주기 함수가 호출되며, 이 ..

state로 상태관리하기 프로퍼티의 특징은 '컴포넌트 내부에서 값을 바꿀 수 없다' 이다. 하지만 값을 바꿔야 하는 경우에는 어떻게 해야할까? 이 때 state를 사용하게 된다. state는 '값을 저장하거나 변경할 수 있는 객체'로 보통 버튼을 클릭하거나 값을 입력하는 등의 이벤트와 함께 사용된다. 예시) import React from 'react' // 숫자 세기 기능을 포함한 컴포넌트! // 리액트 컴포넌트의 핵심, 상태관리! // 리액트 컴포넌트는, 상태가 바뀌면, 랜더를 다시 한다! class Counter extends React.Component{ // 상태관리 멤버변수, state! state = { currentNumber : 0 } render(){ return {this.state...