분류 전체보기30 [React] 리액트 기초부터(5) state는 컴포넌트 자신이 들고 있다. 변화가 필요하다면 컴포넌트의 내장 함수 중 하나인 setState()를 통해 값을 설정할 수 있다. state를 이용하여 컴포넌트 값 변하는 예제) Counter.js) import React, {Component} from 'react'; class Counter extends Component{ state = { number: 0 } handleIncrease = () =>{ this.setState({ number:this.state.number+1 }) } handleDecrease = () =>{ this.setState({ number:this.state.number-1 }) } render(){ return( 카운터 값 : {this.state.num.. 2022. 6. 14. [Date] 북한산 럭셔리 카라반 후기 6월 12일(일) - 6월 13(월) 이틀간 북한산에 위치한 럭셔리 카라반에 다녀왔습니다 !! 가격은 성수기라서 조금 가격이 올랐지만 일월로 가서 주말 가격보단 쌌던거 같습니다 !! 그렇게 해서 119,000원에 다녀 왔구요! 보증금으로 2만원, 숯 비용으로 2만원 추가 결제하고 보증금 2만원은 퇴실할 때 돌려받았답니다. 장작도 추가 결제하셔서 불멍 하시는 분들도 많으시더라구요 !! 저희는 멍때리는 것을 별로 안좋아해서 장작은 추가결제하지 않았습니다 ㅎㅎ 남자친구랑 둘이 가서 이용상품은 "(난방완비) 2030 실속형 *2인전용/커플, 여성" 이였습니다. 입실 시간은 3시 이후, 퇴실 시간은 11시 전 입니다 !! https://booking.naver.com/booking/3/bizes/116852 네이.. 2022. 6. 14. [React] 리액트 기초부터(4) Props 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용한다. => value가 하나의 props가 된다. 사용예제 부모) import React, {Component} from 'react'; class MyName extends Component{ render(){ return( 안녕하세요! 제 이름은 {this.props.name}입니다. ); } } export default MyName; 자식) import React, { Component } from 'react'; import MyName from './MyName'; class App extends Component { render() { return ( ); } } export default App; Default Props 값.. 2022. 6. 10. [React] 리액트 기초부터(3) react 스타일 적용하는 방법 1. 객체 형태로 넣어준다. 2. 카멜케이스로 적용한다. import React, { Component } from 'react'; class App extends Component { render() { const style = { backgroundColor:'black', padding: '16px', color: 'white', fontSize:'36px' } return ( 안녕하세유 ); } } export default App; JSX 클래스를 사용하여 스타일 적용하는 방법 import React, { Component } from 'react'; import './App.css'; class App extends Component { render() { re.. 2022. 6. 9. [React] 리액트 기초부터(2) JSX html 같지만 Javascript로 변환된다. HTML과 비슷하지만 지켜야할 규칙이 몇가지가 있다. 1. 꼭 닫혀있어야 하는 태그 2. 두개 이상의 element는 하나의 element로 감싸져 있어야한다. -> Fragment라는 기능 생김 (불필요한 extra div 없음) JSX 안에 javascript 값 사용하기 import React, {Component} from 'react'; class App extends Component{ render(){ const name = 'react'; return( helle{name}! ); } } export default App; const 와 let function foo(){ var a = 'hello'; if (true){ var a =.. 2022. 6. 9. [React] 리액트 기초부터(1) 기능 개발 사용자 인터페이스 개발에 집중 할 수 있도록 프레임워크, 라이브러리가 만들어져 있다. 이는 생산성, 높은 유지보수성과 연관되어있다. 그중 3대장은 angular, react, vue 등이 있다. angular 다양한 기능이 이미 내장되어있다. http클라이언트, 라우터, 다국어 지원 등등 react 컴포넌트라는 개념에 집중되어있는 라이브러리이다. -> 프레임워크 아님, angular와 달리 사용자에게 전달되는 view만 신경쓴다. 나머지는 서드파티 라이브러리들을 활용한다. vue 입문자가 사용하기에 손쉽다. 공식 라우터와 공식 상태관리 라이브러리가 존재한다. Virtual DOM 변화가 일어난다면 JavaScript로 이루어진 가상의 돔에 한 번 렌더링을 하고 기존 돔과 비교를 한 후 정말 필.. 2022. 6. 8. 이전 1 2 3 4 5 다음
