도시의 침묵보다는 바다의 속삭임이 좋아요

안녕하세요! 오늘은 30기 sopt 앱잼에서 처음 사용해보게 된, Recoil에 대해 사용해본 경험을 담아 포스팅해보려고 합니다 ヾ(≧▽≦*)o 0. React의 한계 React는 단방향으로 바인딩을 하는 라이브러리다. 그래서 부모 component에서 자식 component방향으로만 state를 props로 전달할 수 있고, 자식의 props를 부모에게 전달하는 방법은 없다! 없지만..! 자식 component에서 부모 component의 state를 아예 바꿀 수 없는 건 아니고, 다음과 같은 방법이 존재한다. 부모의 state를 바꾸는 setState 함수를 자식에게 넘겨준다. 상태 관리 tool 을 사용한다. 1번의 경우 , 자식을 내려보내는 depth가 조금만 깊어지면 1번의 방법은 효율적이지 ..

https://rinae.dev/posts/a-complete-guide-to-useeffect-ko [번역] useEffect 완벽 가이드 Dan Abramov의 'A Complete Guide to useEffect 번역' rinae.dev 아래의 이전 글에서, useEffect 부분이 잘 이해가 되지 않아서 관련 자료를 찾아보았는데 읽어볼만한 자료가 있길래 첨부해둔다! 조금씩이라도 읽어보면 좋을 것 같다😁 2021.07.27 - [React] - [React] 라이프 사이클 메서드(class형, Hooks useEffect())

※배워가고 있는 학생입니다. 틀린 부분이 있다면 댓글로 피드백 부탁드립니다. 1) 컴포넌트의 라이프사이클(수명주기) 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다. 이때 컴포넌트의 라이프사이클 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있다. 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있으나, 함수형 컴포넌트에서는 사용할 수 없는데, Hooks 기능을..

※배워가고 있는 학생입니다. 틀린 내용이 있다면 댓글로 피드백 부탁드립니다😊 1) 개요 웹 어플리케이션을 만들다 보면 반복되는 코드를 작성할 때가 있다. 그래서 오늘은 리액트에서 반복되는 코드를 효율적으로 작성하는 방법에 대해 적어보려 한다! 2) map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용해서 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. arr.map(callback, [thisArg]) • callback: 새로운 배열의 요소를 생성하는 함수 - currentValue: 현재 처리하고 있는 요소 - index: 현재 처리하고 있는 요소의 inde..

※배워가고 있는 학생입니다. 틀린 부분이 있다면 댓글로 피드백 부탁드립니다!😁 리액트를 막 배우기 시작하면서, 처음 부딪친 난관은 바로 JSX 였다! html 만 공부하던 나에게 조금 혼란을 주는 문법이었는데, 오늘 스터디에서 현직자분이 가르쳐주신 덕분에! (감사합니다ヽ(✿ﾟ▽ﾟ)ノ) 조금 명확해질 수 있었다. 그래서 알게 된 이참에 저서를 참고해서 조금 정리해두려고 한다. 1) JSX 문법이란? 근본적으로, JSX는 React.createElement(component, props, ...children) 함수에 대한 문법적 설탕을 제공할 뿐입니다. -React 문서- JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번..