영원히 흘러가는 강

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 구조 분해 할당 - JavaScript | MDN 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. The source for this interactive example is stored in a GitHub repository. If you'd like to cont developer.mozilla.org

조건에 따른 값변화로 알고 넘어가면 될것같다/ 전에 사용하던 useState, useEffect를 사용한 코딩이라 익숙해지는데 초점을 잡아야할것 같다 import React,{useEffect,useState} from 'react'; function App() { const[condition,setCondition]=useState(false); //useState 값으로 condition 초기값 false const toggle= ()=> setCondition(!condition);// toggle 실행시 condition 값 변경 const renderCondition=condition//renderCondition 값으로 같다면 true ? 'True' : 'False' return ( {ren..

props는 property의 약자로, 부모에게 받아온 데이터입니다. 리액트의 Data Flow는 단방향 형식으로 부모에서부터 자식으로 이동하기 때문에 거꾸로 올라갈 수 없습니다. 따라서 props에 있는 데이터들은 수정이 불가능하며 오직 안에있는 값을 꺼내서 사용할수만 있습니다. props는 위와 같이 정의되어 있다. 내가 생각한 props는 App.js는 메인으로 건재할테니 하위 파일에다가 값을 전달해주는 그리고 매개변수처럼 props를 받아오는 것이다. 아래 코드를 보면 이해 갈 것이다. 아래는 App.js import React,{useEffect,useState} from 'react'; import Counter from './components/Counter'; function App() {..

이전에 useState와 함께 useEffect useEffect는 렌더링이 될때마다 특정 작업 수행하도록 설정할수 있다! 아래는 버튼 클릭시 증가하는 간단한 코드 import React,{useEffect,useState} from 'react'; function App() { const [count,setCount]=useState(0); useEffect(()=>{ console.log('effect');//버튼 클릭시마다 실행되어 로그찍힘 }) console.log('rendering') const incre=()=>{ setCount(count+1); } return ( good! click {count} ); } export default App; 위는 값 변경시에 무조건 useEffect를 ..

컴퓨터에 관한 모든 언어에 있어서 "hello world" 가 처음 작성되는 것이라면 js에서는 이벤트로 alert 찍어보는게 가장 먼저이지 않을까 생각한다 :) 그렇다면!! 리액트에서의 App.js에다가는 어떻게 해야 이벤트를 설치하고 alert를 찍을까 아래는 버튼 클릭시 함수 실행 function App() { const func=()=>{ alert('hello'); }; return ( //리액트에서는 onClick ! 대문자이다 submit ); } export default App; 그렇다면!! 이벤트 설치를 알았으니 하나더! 아래는 onKeyUp (글자 입력후 눌릴때가 아니라 떼어질때) function App() { const func=()=>{ console.log('key 눌렸다가 떼어..

ko.reactjs.org/docs/hooks-overview.html Hook 개요 – React A JavaScript library for building user interfaces ko.reactjs.org "Hook이 React 버전 16.8에 새로 추가되었습니다. Hook을 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다." 클래스를 사용하여 컴포넌트를 만들곤했었는데 클래스도 계속 지원할 예정이며 hook도 나란히 지원할 예정이라 한다. react hook의 등장으로 초보자인 나의 입장으로는 매우 쉬워진것 같다... setState와 props의.. 어려운 구조... 각설하고 react hook을 보자면 Hook은 함수 컴포넌트에서 React s..

* 컴포넌트는 최상위 태그를 하나 이상 포함해야한다.! import React,{ Component } from 'react'; // 리액트에서 컴포넌트 사용 class Subject extends Component { render() { return ( WEB world wide web! ); } } class App extends Component { render() { return ( ); } } export default App; props class Subject extends Component{ render(){ return ( {this.props.title} //밑에 App 에서 정의한 title 값 {this.props.sub} // 위와 마찬가지로 sub 값 ); } } class Ap..

일단 리액트 개발 환경을 만들기 위해서는 node js가 필요하다고 한다. 직접적인 연관은 없지만 node js가 가진 기능들이 리액트 개발시에 필요하기 설치한다고 한다.! nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 1.node js 설치 cmd로 npm -v 설치된 버전이 뜰것이다. 2. create-react-app 설치 npm install -g create-react-app 설치 이루어짐 3. 바탕화면에 react-app 으로 저장할곳 지정 cmd로 react-app 주소 따라가서 create-react-app . 명령어 실행, 폴더에 Create R..