Small Grey Outline Pointer 'Dev./React' 카테고리의 글 목록 (2 Page)
본문 바로가기

Dev./React16

React :: 라이프 사이클 class 컴포넌트의 라이프 스타일 constructor(생성자) 제일 먼저 실행되는 함수 getDerivedStateFromProps state 와 props를 동기화 시켜주는 함수 render UI를 그려주는 함수 componentDidMount 마지막으로 호출 되는 함수, UI 셋팅이 끝나면 알려준다 mounting import React, { Component } from 'react'; import BoxClass from './component/BoxClass'; export default class AppClass extends Component { //컴포넌트가 실행되자마자 바로 호출 된다 constructor(props) { super(props); this.state = { counte.. 2022. 8. 24.
React :: 클래스 컴포넌트 클래스 컴포넌트 단축키 rcc AppClass.js import React, { Component } from 'react' export default class AppClass extends Component { render() { return ( AppClass ) } } App.js import React, { Component } from 'react'; export default class AppClass extends Component { //컴포넌트가 실행되자마자 바로 호출 된다 constructor(props) { super(props); this.state = { counter2: 0, num: 1, value: 0, }; } increase = () => { //전달할 객체 안에 thi.. 2022. 8. 22.
React :: 가위바위보 게임 만들기 가위바위보 게임 만드는 로직 1. 박스 두개 만들기(사용자-컴퓨터, 사진, 결과표시가 들어간다) 2. 가위,바위,보 버튼이 있다 3. 버튼을 클릭하면 클릭한 값이 박스에 보인다 4. 컴퓨터는 랜덤하게 아이템이 선택 된다 5. 3번과 4번의 결과를 가지고 승패를 따진다 6. 5번의 결과에 따라 박스 테두리 컬러가 바뀐다 (이기면 그린, 지면 레드, 비기면 블랙) App.js import './App.css'; import Box from './component/Box'; /* 가위바위보 게임 만드는 로직 1. 박스 두개 만들기(사용자-컴퓨터, 사진, 결과표시가 들어간다) 2. 가위,바위,보 버튼이 있다 3. 버튼을 클릭하면 클릭한 값이 박스에 보인다 4. 컴퓨터는 랜덤하게 아이템이 선택 된다 5. 3번과 .. 2022. 8. 17.
React :: 버튼 클릭시 숫자 카운트 되기 새 프로젝트 폴더를 만들고 npm start를 해도 실행이 안되면 경로충돌이 일어난 경우일 수 있으므로 새로 다시 시작해보는게 좋다 리액트에서는 클릭! onClick => c를 대문자로 표기한다, onClick 뒤에 {} 가 사용된다 App.js import './App.css'; function App() { let counter = 0; const increase = () => { counter += 1; console.log('카운터 확인!', counter); }; return ( {counter} 클릭! ); } export default App; UI는 변함 없으나, 확인용 콘솔창에는 클릭시 숫자가 올라감을 확인할 수 있다 UI에도 숫자가 바뀌는 것을 보여지도록 수정해야 한다! 리액트에서는 s.. 2022. 8. 12.
리액트 기초 1. 리액트가 나오게 된 이유 - 자바스크립트만 가지고 개발을 하려니 불편한 점이 많았는데 다음과 같다 - 첫번째... document.getElementById('')를 이용해서 매번 아이템을 가져오고, 아이디를 주고, 선택해서 가지고 오고 이런 절차를 매번 필요할 때 마다 작성해주는 것이 너무 불편했음 심지어 스펠링이라도 틀리면 오타를 찾는데 헤메는 일이 발생하기도 함 - 두번째... 매번 새로운 페이지를 만들 때 마다, 스크립트 태그 걸고, 링크 해주고, 파일도 따로따로 관리해줘야 하고 이런 점들이 불편했다 사이트의 규모가 커지면 커질수록 페이지 숫자도 많아지는데 계속 따로따로 관리하려니 많이 불편한것이 사실 - 세번째... 새로운 페이지에 들어갈 때 마다, 새로고침이 되어진다 요즘 웹사이트를 데스.. 2022. 8. 10.
node.js :: express로 웹서버 띄우기 터미널에 ctrl + c 로 서버를 새로 띄워준다 2022. 7. 24.

티스토리툴바