에바니네

Click to Scroll ! ( 클릭해서 이동 )

토이프로젝트로 MBTI 테스트만드는데 디자인이 이렇게 나왔다. 1. Ref를 통한 ScrollIntoView 메소드 바닐라 자바스크립트에서는 Document에서 직접 DOM를 뽑아서 저 메소드를 사용했었지만, React에서는 useRef를 통해서 저 메소드를 사용해서 ref.current.scrollIntoView() 를 통해서 우리가 원하는 동작을 취할 수 있다. https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView Element: scrollIntoView() method - Web APIs | MDN The Element interface's scrollIntoView() method scrolls the element's ..

useEffect 와 useLayoutEffect의 차이 ?

https://blog.logrocket.com/useeffect-vs-uselayouteffect-examples/ React useLayoutEffect vs. useEffect with examples - LogRocket Blog Compare the useEffect and useLayoutEffect Hooks in React, looking into the inner workings and best use cases for each. blog.logrocket.com 공부 목적으로 번역하면서 정리한 글입니다. 오역있을 수 있음 ㅎ ㅎ; What’s the difference between useEffect and useLayoutEffect? Sprinkled all over the offi..

JS와 JSX 사이의 차이는 무엇일까여 ?

https://stackoverflow.com/questions/33042923/what-is-the-difference-between-javascript-and-jsx What is the difference between JavaScript and JSX? I am pretty new to React, I find most tutorial talked about JSX, I have not learnt any JSX syntax, but I am wondering if the main usage difference between JavaScript and JSX in React is only on the... stackoverflow.com 공부 목적으로 번역하면서 공부한 글입니당. JS is st..

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 ( ..