React

1. Redux 란? Redux는 JavaScript 애플리케이션의 상태 관리를 위한 예측 가능한 상태 컨테이너 라이브러리입니다. 특히 React와 함께 사용되어 React 애플리케이션에서 상태를 효과적으로 관리하고 데이터 흐름을 예측 가능하게 만듭니다. Redux가 필요한 이유 (1) useState의 불편함 어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자 할 때 Props로 State를 공유하는 방법에는 불편한 점이 있습니다. 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야 한다. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 한다. 즉, 정작 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하..

React Hooks에는 많은 기능들이 있는데요. 그 중 많이 사용되는 useState, useEffect, useRef, useContext, 최적화 hooks(React.memo, useCallback, useMemo) 등에 대해 알아보겠습니다. 1. useState (1) 정의 useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해줍니다. useState의 기본적인 형태는 아래 처럼 생겼습니다. const [state, setState] = useState(initialState); 원래는 useState 라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습일 뿐입니다. 2. 함수형 업데이트 (1) 함수형 업데이트란? setState에는 함수형 ..

1. Styled Components 1. CSS-in-Js란? (1) css-in-js란 무엇인가? CSS-in-JS방식이란, 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식입니다. 순수한 CSS코드를 우리가 아니라, 자바스크립트를 이용해서 CSS코드를 만들어내는 것이죠. 이러한 CSS-in-JS 방식으로 styled-components 가 있습니다. (2) styled-components 란 무엇인가? styled-components는 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지 입니다. styled-components외에도 다양한 패키지가 있지만, styled-components 예전부터 꾸준히 많은 개발자들에게 선택받은 패키지입니다. ..

필수 프로그램 설치 (1) 크롬 브라우저 우리가 만드는 웹은 브라우저에서 구동됩니다. 브라우저는 앞으로 우리가 가장 많이 사용하는 프로그램이죠. 많은 브라우저 중에서 저는 구글 사의 크롬을 사용할 것 입니다. 브라우저를 설치해주세요. https://www.google.co.kr/chrome/ (2) VScode 코드를 작성하기 위한 프로그램이 필요한데요. 우리가 가지고 있는 메모장으로도 코딩이 가능하지만, 더 효율적인 코드 작성을 위해 전문 에디터를 사용하겠습니다. 그 중에서도 MS사의 vscode를 사용할 것 입니다. vscode를 설치해주세요. https://code.visualstudio.com/ (3) git 설치하기 우리가 작성한 코드를 저장 및 관리하고, 다른 사람과 공유하기 위해 git 이라..

상수와 변수 예전에는 변수! 하면 모두 var 키워드를 이용했죠. 이제는 const(상수)와 let(변수)를 이용해요. ❗ const : 재할당 안돼요. 내부 속성값은 수정 가능. let : 재할당 가능해요. if (true) { var a = 1; // const a = 1; } console.log(a); Object 선언, 단축 속성, 객체 복사 ❗ 가장 중요한 것! object는 key-value pair ! 객체를 선언하는 방법 // 선언방법 const person = { name: '르탄', age: 21, company: 'sparta coding club', doSomething: () => {}, } 생략해서 표현하는 방법 const name = '르탄'; const age = 21; /..