코딩성장기

우선, useEffect에 대해 얘기를 하기전에 "side effect"라는 것에 대해 짧게 정의해보고자 한다. side effect 란?? 일반적으로 React에서 side effect라 함은, React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업을 일컫는다. (이러한 sideeffect는 짧게 'effect' 라고 불려진다.) 왜냐하면, 이러한 작업들은 다른 컴포넌트에 영향을 줄 수 있고, 렌더링 과정에서는 구현할 수 없는 작업이기 때문이다. 그렇다면, 이제 원래 우리가 알고 싶어했던, useEffect에 대해 알아보자. useEffect 란?? effectHook, 즉, useEffect는 함수 컴포넌트 내에서 위에서 설명한 side effect를 수행할 수 있게 해..

오늘은 내가 HA를 치르면서 내가 안다고 생각했지만, 그렇지 못했던 것들에 대해 정리해 볼 생각이다. 그 첫번째로 fetch를 들겠다. What is Fetch and how to use it? Mdn에 따르면, fetch api는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있으며, XML HttpRequest와 같은 비슷한 API가 존재하지만, 새로운 Fetch API는 좀 더 강력하고 유연한 조작이 가능하다. 나는 도대체 뭔말인지 모르겠다. 아래의 예를 보며 자세히 알아보자. fetch를 사용하는 구조는 아래와 같다. 그래. 사용하는 방법은 대강 알겠다. fetch에다가 접속할 url을 넣고, .then을 통해 콜백함수를 호출하고, 받아온 response에다가 json()메소드를..

props의 사용 코드 스테이츠에서 배우면서 가장 애를 먹은 것을 꼽자면, 단언코 props의 사용이라고 할만큼 애를 많이 먹었다. 이번 HA를 하면서 배운점을 나름 잊지 않기 위해서 정리를 해보고자 한다. 사실 props의 사용 자체는 react홈페이지에 나와있는 것처럼 어렵지 않다. 위 처럼, 만들고 싶은 props를 전달하고 싶은 사용자정의 컴포넌트 태크의 속성으로 넣어주면 된다. (참고로 여기에서 props는 {text = "I'm the eldest child"}의 객체라고 생각하면 된다.) 그리고 이렇게 만든 props는 객체의 형태를 띄게 된다. (즉, key = text, value = 'I'm the eldest child" 가 되는 것. 이는 사용에 있어 필요한 부분이니 기억!) 그럼 ..

Route를 이용하기 React에서 페이지를 연결하기는 굉장히 쉽다. 와 같이, 필요한 BrowserRouter, Route, Switch 그리고 Link를 걸고 싶은 컴포넌트가 있는곳에는 Link를 import해준다. 그리고 BrowserRouter를 가장 밖에 두고, 그다음 Switch, 필요한 곳에 Route를 연결한 뒤, Route 태그안에 path를 적어 연결을 해주면 된다. 여기에서 주의 할 점은 홈 페이지의 path를 /로 설정하게 될텐데, 여기에서는 와 같이 exact가 필요하다는 점이다. 그렇지 않으면, '/'를 포함한 나머지 페이지들의 주소와 이 홈페이지를 구분하지 못하게 된다.