공부하는 비오

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

리덕스는 어플리케이션을 예측가능하도록 만들어준다. 예측가능하기 때문에, 어플리케이션의 복잡성이 낮아지고, 그로 인해 똑같은 어플리케이션을 만들어도 리덕스를 사용하면 훨씬 피로도가 낮다. 또한 더 복잡한 어플리케이션을 보다쉽게 만들 수 있다. ** 주로 react와 함께 사용하지만 react 한정 라이브러리는 아니다. 즉 vanilla Javasript와도 사용가능하다. 리덕스의 특징. 1. 모든 어플리케이션이 하나의 상태(store)를 가짐. 즉 하나의 객체(store) 안에 어플리 케이션에 필요한 정보(state)가 있다. 2. state는 외부로부터 철저하게 차단되어 관리된다. 마음대로 store에 접근해서 state를 바꿀 수 없다. 오직 담당자(reducer)를 통해서만 데이터를 수정하고 가져가는..

Redux 2020. 11. 16. 11:25

배열의 인덱스 번호를 가져오는 배열메서드이다. 찾는 내용이 배열 안에 있으면 인덱스 번호를, 없으면 -1을 반환한다. indexOf를 사용하면 여러상황에서 코드를 단순화 할 수 있다. - A배열에서 B배열의 요소들을 뺀 배열 가져오기. (Remove multiple values in an array) - 배열의 중복 제거

JavaScript 2020. 11. 12. 10:20

부모 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

React는 state가 바뀔때마다 다시 rendering 한다. 이렇게 사용할 경우 함수호출 > 렌더링 > 다시 함수 호출 > 다시 랜더링 > ... 무한루프에 빠지게됨 ^^;;; (onChangePage에서 함수를 정의한 것이 아니라 호출했기 때문에 랜더링할때마다 호출한다.) 해결방법. onChangePage={this.changeMode} 이렇게 함수를 호출하지 않게 사용하면 된다. 하지만 매개변수가 필요한 위와 같은 경우, 함수 안에 넣어주어야함. onChangePage={() => this.changeMode('read')}

Error 2020. 11. 4. 16:27

구글링해보니 해당 에러는 데이터가 없기때문에 생기는 에러였다. 내 경우엔 json파일을 받아오지 못했는데, 코드짤때 상대경로로 작성했기 때문이었다. 해결방법 상대경로를 절대경로로 바꿔준다. 즉 웹페이지 url을 넣어줌.

Error 2020. 11. 4. 12:37

리액트를 사용하려고 했는데 사용할수 없다고 오류가 떴다. 읽어보면 친절하게 엑세스권한이 없다고 설명해주고있지만, 이 오류를 처음봐서 당황했었다. 다음에도 똑같은 오류가 나면 당황하지말고 여기들어와서 봐야지. 해결방법 터미널(혹은 CMD)에서 실행원칙을 unrestricted로 바꿔주면 된다. Set-ExecutionPolicy Unrestricted ExecutionPolicy 를 입력하면 현재 설정을 보여줌. 다시 바꾸려면 다음과 같이 입력하면 된다. Set-ExecutionPolicy Restricted

Error 2020. 11. 3. 15:23