개발하는SM

useEffect 는 useState 외에 가장 중요한 리액트 훅이다. 따라서 반드시 확실하게 이해하고 넘어가야 한다. 아래와 같이 dependencies 배열 없이 첫번째 인자로 함수만 넘겨줬을 경우, 컴포넌트가 다시 실행될 때마다 해당 함수가 수행된다. 아래 useEffect() 는 모든 컴포넌트 렌더링 주기 이후에 실행되기 때문이다. ( + 컴포넌트가 처음 마운트 된 때 포함 ) 그렇다면, 두번째 인자로 빈 배열 Dependencies 를 넘겨줬을 경우는? 해당 Login 컴포넌트가 처음으로 마운트되고 렌더링 될 때만 실행된다. 두번째 인자로 특정 값을 넘겨줬을 경우는? 해당 State 가 변경될 때마다 "EFFECT RUNNING" 로그가 찍힌다. 아래 예시에서는 Password Key Strok..

일반적으로 부모 -> 자식으로 props 를 통해 데이터를 전달 할 수 있는데, 자식 -> 부모로 데이터를 전달하는 방법은 없을까? 부모에서 자식 컴포넌트 를 호출할 때 함수를 전달하고, 자식 컴포넌트에서 props 를 통해 전달받은 함수를 호출하면서 파라미터로 데이터를 전달할 수 있다. 이런 개념이 Lifting State Up 개념이고, React 에서 매우 자주 사용되는 구조이다.

React is a Javascript library for building user interfaces - 리액트는 기존 기술들보다 좀 더 간단히 사용자 인터페이스를 구축할 수 있도록 돕는다. - React is all about Component What is Component? - 사용자 인터페이스의 모든 것은 결국 Component 로 만들어져 있다. - HTML, CSS 과 어떤 로직을 위한 Javascript 의 결합 Why Components? - Reusability - Seperation of Concerns How is a component Built? - HTML + CSS + Javascript - Declarative Approach : 항상 목표 상태를 정의하는 것이 중요함. -..

Spread & Rest Operater - Spread 연산자와 Rest 연산자는 같은 구문을 사용함 : ... - Spread Operator 는 배열에서 요소들을 가져오거나 객체에서 속성들을 가져옴. - Spread Operator 는 기본적으로 1 depth 까지만 Deep Copy 를 수행함. - 참고 : https://hanamon.kr/javascript-shallow-copy-deep-copy/ - Rest Operator 는 Deconstructuring 과 관련된 문법으로, 아래와 같이 사용됨. JS Array Functions - 차세대 자바스크립트는 아니지만, 다음과 같은 javascript Array 함수가 있음. - 아래 링크를 통해 사용법 참조. 다음 페이지는 어레이 프로토타입..