에바니네

setState의 비동기성을 들어보셨습니까 ?

리액트에 대한 질문을 물어볼때 많이 나오는 질문을 하나씩 파보려고 합니다. setState는 비동기입니다 ? 위에 코드를 보다 싶이 클릭을 하고 난 직후에 console로 찍어보면 상태가 업데이트 되기 전값이 나오는 것을 확인 할 수 있습니다. 이렇게 비동기라는 것을 확인할 수 있는데, 이는 리액트에서 효율적으로 상태를 관리하기 위함인데, 다른 것을 한번 봐보자 업업을 누르면 2개씩 안 올라가는 것을 볼 수 있다. 이는 useState 자체가 상태를 저장하고 있는 곳이 결국 객체이고, count라는 key값을 가지고 있는 것이다. value를 저렇게 받아서 업데이트를 하는 것이다. 결국엔 key값이 같은 작업을 2번하니까 덮어 씌어진거라고 할 수 있다. 여기서 같은 batching이라는 말이 나오는데, ..

Axios

Axios는 프로미스 객체를 반환하고, response data는 프로미스 객체안에 Data Property안에 들어있습니다. error가 발생하면 error.response로 반환이됩니다. 우리가 get 요청해서 받는 데이터는 data안에 들어있다고 보면되고, 요청에 대한 code코드나 헤더 정보, 그외 다른 다양한 정보도 돌려주는데 Axios는 특히 네트워크 에러 외 다른 다양한 에러도 알아서 뱉어주기 때문에 더 편하다고 합니다. ㅎ const fetchData = async () => { try { const response = await axios(url); // Get Request const data = response.data; // Response안 데이터 분해 console.log(dat..

React - 공식문서 읽어보기4

Hook - 리액트 16.8버전부터 추가됬고, 기존 Class 바탕의 코드를 작성할 필요없이 상태값과 여러 다른 기능을 사용할 수 있게 되었습니다. - Class의 단점 보완과 재사용성을 강화하기 위해 만들어졌다. Hook의 사용 규칙 최상위에서만 Hook을 호출해야한다. 반복문이나 조건문, 중첩 함수 내 Hook을 실행시 기대치 못한 사이드 이펙트 있을수 있다. React 함수 컴포넌트 혹은 Custome Hook 내에서만 호출 할 수 있습니다. State Hook state 변수 선언하기 클래스를 사용할때, constructor 안 this.state를 { count: 0 }으로 상태 변수를 선언하는 코드다. class Example extends React.Component { constructor..

React - 공식문서 읽어보기3

조건부 렌더링 ( Conditional Rendering ) 조건부 렌더링은 자바스크립트에서의 조건 처리와 똑같이 동작합니다. 조건문이나 조건부 연산자를 사용하면 현재 상태를 나타내는 요소를 생성 및 사용이 쉽게 가능합니다. function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; } return ; } ReactDOM.render( // Try changing to isLoggedIn={true}: , document.getElementById('root') ); 위 코드 처럼 isLoggedIn prop에 boolean값에 따라서 다른 element를 출력하는 것을 볼 수 있다. function ..

React - 공식문서 읽어보기2

State와 생명주기 Class Component import React, { Component } from 'react' export default class ClassComponent extends Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( ..

React - 공식문서 읽어보기

JSX 자바스크립트를 확장한 문법으로 자바스크립트의 모든 기능이 포함되어 있고, React에서 요소(element)를 생성합니다 . JSX 사용이 필수는 아니지만 UI 관련 작업을 할때 가독성이 훨씬 좋다고 할 수 있습니다. 간단히 말하면 React.createElement의 간편 표현식이다. JSX - 표현식 const name = 'Josh Perez'; const element = Hello, {name}; ReactDOM.render( element, document.getElementById('root') ); 위 코드에서 볼 수 있듯이 JSX에서는 변수를 포함한 모든 표현식을 중괄호('{}')안에 넣어야합니다. function getGreeting(user) { if (user) { retur..

React { Fetch }

Fetch API 웹에서 화면을 그릴때는 보통 서버에서 데이터를 받고 프론트에서 그 데이터를 바탕으로 화면을 구성하게 된다. 일단 기본적인 Fetch 코드를 보자 fetch('https://raw.githubusercontent.com/techoi/raw-data-api/main/simple-api.json') .then((response) => response.json()) .then((data) => console.log(data)); fetch로 API를 받아오고, response에 JSON을 가져오고 콘솔로 찍어보는것이다. 해당 JSON 데이터는 useState를 통해서 상태관리를 하고 배열함수를 통해 정보를 시각화 할 수 있다. const App = () => { const [data, setD..

React { Key }

Key와 리랜더링 관련해서 알아보기 const rootElement = document.getElementById('root'); const todos = [ [ {id : 1, value: "Wash dishes"}, {id : 2, value: "Clean the bed"}, {id : 3, value: "Running"}, {id : 4, value: "Studying"} ], [ {id : 4, value: "Studying"}, {id : 1, value: "Wash dishes"}, {id : 2, value: "Clean the bed"}, {id : 3, value: "Running"} ], [ {id : 3, value: "Running"}, {id : 1, value: "Wash dis..