공부하는 비오

reactjs.org/docs/hooks-state.html HOOK을 사용하면 컴포넌트를 class로 만들 필요도 없고, 훨씬 코드사용량이 줄어든다. 1. import로 { useState } 를 불러옴. 2. state 설정. const [state이름, setState를 대신할 함수이름] = useState(state의 초기값); 3. state 변경. setState(변경할 state 값); or setState( preState => ...preState.... ); useState에서 함수를 사용할때는 기본적으로 바꾸기 전 state값을 인자로 받아온다. 위의 화면과 같은 경우 setCount( preCount => preCount + 1); 이렇게 사용할 수 있음.

React 2020. 11. 16. 19:16

부모 component 안에 있는 메서드 매개변수로 id, title, desc를 받아옴. centent: 변수로 새로운 배열 만듬. _contents: state에 있던 기존 배열 복사. _contents.splice: 기존 content의 id값을 찾아 새로운 내용(content)로 바꿈. render selected_content : 수정하기를 누르기 전 화면에서 배열 데이터를 받아옴. props로 data와 onSubmit함수를 전달. onSubmit: 매개변수로 id, title, desc를 받아와 updateSubmit 함수를 실행. 자식 component props로 전달받은 data로 state를 설정. inputFromHandler: state 값 수정 ** 객체 안의 key를 [대괄호]..

React 2020. 11. 7. 12:38

위 화면과 같이 링크 클릭시 내용이 바뀌는 이벤트를 state를 사용하여 만들어보자. 이벤트 등록 컴포넌트에서 props 함수를 onclick으로 등록 onClick={ ( ) => { props.function } } 호출한 컴포넌트에 onClick으로 실행할 함수를 Props로 지정 function={ onclick 으로 실행할 함수 } State로 props 조작하기 state에 내용 지정. 내용이 들어갈 컴포넌트인 Content의 props를 변수 _title과 _desc로 줄거임. _title과 _desc는 state에 따라 값이 변화함. import { Component } from "react"; import "./App.css"; function Subject(props) { return ..

React 2020. 11. 4. 18:13

State? State는 React.Component에 내장되어있는 프로퍼티이다. 그러므로 class component에서 사용. state는 일종의 object로서, 변화하는 데이터 값을 담을 수 있다. Class Component extends React.Component{ state = { key1 : value, ... }; func = ( ) => { this.setState( ... ); } render( ) { ....{this.state.key1}... } } state = { ... } 로 state 값을 지정해준다. state의 사용은 {this.state.key1}를 사용한다. 앞서 state는 변하는 데이터 값이라고 했다. state의 값을 변화시키기 위해서는 this.setStat..

React 2020. 10. 7. 16:49

배열을 사용하여 props를 만들고 적용 function Component({props1, props2}) { return ... } const array = [ {key1: ..., key2:...}, {key1: ..., key2:...}, {key1: ..., key2:...} ] function App() { return {array.,map(aja => )} 잘 적용되지만 console을 확인했을 때 error가 있음. 리스트의 자식들은 각각의 다른 key prop를 가져야한다. 이를 해결하기 위해서는 key prop를 각각 주면된다.

React 2020. 10. 6. 16:24

Props component의 argument(인자값). 함수의 argument를 바꾸어 사용하듯이, component도 props를 수정하여 사용할 수 있음. function Component( {props_value} ) { return ( ... {props_value} ); } function Food ({fav}){...} >>> Food라는 이름의 component를 만듬 (component의 이름은 항상 첫글자가 대문자) props로 fav를 가짐.

React 2020. 10. 6. 11:47

Component ? Component는 HTML을 반환하는 '함수' 혹은 'class'이다. Component를 사용하면, 한번 짠 코드블록을 다른 곳에서도 component 한줄로 사용할 수 있음. 예를 들어 를 컴포너트로 만들면, 다른 페이지에서 이라고만 작성해도 사용가능. Component (사용자 정의 코드)의 장점. - 가독성을 높일 수 있음 - 재사용성이 높아짐(like as function) - 유지보수 편리(compoenet에서만 바꾸면 재사용한 모든 곳에서 변경되므로) src 폴더의 App.js 에서 지정. 참고로 Component를 만드는데 사용된 언어는 jsx 이다. facebook에서 개발한 js 확장언어라 생각하면 편리함. javascript에서 HTML의 형태로 코드를 사용하게..

React 2020. 8. 30. 23:19