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

안녕하세요! 오늘은 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..

※배워가고 있는 학생입니다. 틀린 부분이 있다면 댓글로 피드백 부탁드려요😆 1) 개요 진짜 별거 아닌데, 가끔씩 자바스크립트 문법에서 세미콜론을 붙이냐 안 붙이냐 를 고민한 적이 좀 있다. 그래서 이참에 헷갈리는 거 정리해보려고 한다! 원칙은 아니고, 권고사항이니 참고만 해라! 2) 문법 1. 함수 선언문(function statement)와 함수 표현식(function expression) 함수 선언문 - 함수 끝에 세미콜론을 붙이지 않음 함수 표현식 - 세미콜론을 붙이는 것을 권장 //함수 선언식 function add(x,y){ return x+y; } //함수 표현식 const add = (x,y) => { return x+y; }; 똑같은 식을 함수 선언식과 함수 표현식으로 나타낸 것이다. 하나..

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

querySelectorAll을 쓰면서 가끔 겪는 문제가 있다. 선택한 요소 중 특정 요소만 효과를 주고 싶은데, 그러면 그 요소의 인덱스를 알아야 한다는 것! 그래서 구글링을 해보다가 할 수 있는 방법을 찾았긴 찾았다. 이게 과연 성능 등을 고려해도 좋은지는 모르겠지만....! 그래도 오늘의 성과이니 기록해두려고 한다. 아래의 예제는 모든 button 요소들을 저장한 buttons 에서, 내가 클릭한 인덱스(buttons[n])의 요소가 가지고 있는 textContent를 alert 창으로 띄우는 기능이다. const buttons=document.querySelectorAll('button'); for(let i=0;i{ alert(buttons[idx].textContent); } })(i); } ..

※배워가는 학생입니다. 틀린 부분이 있다면 댓글로 피드백 부탁드려요😁 1) 자바스크립트 자료형 자바스크립트의 자료형은 크게 기본 타입과 참조 타입으로 나뉨 - 기본 타입 : 숫자, 문자열, 불린값, undefined, null - 참조 타입 : 객체 (배열, 함수, 정규표현식) 2) 숫자 c언어와 같은 경우에 int, long, float, double 등 정수냐 실수냐에 따라 다양한 숫자타입이 존재하지만, 자바스크립트의 경우에는 딱 하나의 숫자형, number 만 존재한다. let intNum=10; let floatNum=0.5; console.log(typeof intNum); // number console.log(typeof floatNum); //number 자바스크립트에서는 모든 숫자를 64..

※배워가고 있는 학생입니다. 틀린 부분은 댓글로 알려주시면 감사하겠습니다😁 자바스크립트 데이터 타입 중 null과 undefined의 차이를 잘 몰라서 정리해두려고 한다. 사실 그렇게까지 중요한지는 잘 모르겠지만 .. 그냥 궁금해서 찾아보았다! 배우는 입장에서 중요하고 중요하지 않고를 따져가면서 하기엔 넘 건방지니까,, null과 undefined는 모두 자바스크립트에서 '값이 비어있음'을 나타낸다 1) undefined - 값이 할당되지 않은 변수의 기본값. 즉, 변수를 선언할 때 값을 대입하지 않으면 undefined로 저장 - 반환할 결과값이 없을 때. - 타입이자, 값 let empty; //undefined console.log(typeof empty); //undefined 2) null - ..

1) typeof 인수의 자료형을 반환해주는 typeof 연산자는 두가지 형태의 문법을 지원한다. 1) 연산자: typeof x 2) 함수: typeof (x) 괄호의 여부에 상관없이 결과는 동일하다. typeof undefined // "undefined" typeof 0 // "number" typeof 10n // "bigint" typeof true // "boolean" typeof "foo" // "string" typeof Symbol("id") // "symbol" 2) 각 타입별 typeof 연산자 결과 타입 자료형 결과 기본 타입 숫자 number 기본 타입 문자열 string 기본 타입 불린값 boolean 기본 타입 null object 기본 타입 undefined undefined..