코딩하는 복서 🥊

컴포넌트 수명주기란? 리액트(React) 컴포넌트의 수명주기(Lifecycle)는 컴포넌트가 생성될 때부터 소멸될 때까지의 여러 단계를 말합니다. 컴포넌트 수명주기를 이해하면 컴포넌트가 언제 어떤 작업을 수행하는지 이해할 수 있습니다. 리액트 클래스 컴포넌트의 수명주기 메서드들은 다음과 같습니다: 라이프사이클 메서드는 클래스 컴포넌트에서만 사용할 수 있습니다. 함수형 컴포넌트에서는 Hooks 기능을 사용해서 비슷한 기능을 처리합니다. Mounting(생성 단계) constructor(): 컴포넌트가 생성될 때 호출되는 생성자 메서드로, 초기 상태 설정 및 바인딩 작업에 주로 사용됩니다. static getDerivedStateFromProps(): props를 기반으로 상태를 동기화할 때 사용합니다. (..

1. Recoil 이란? 리액트의 전역 상태관리 라이브러리로 리액트를 만든 메타(구페이스북)에서 제작 *유사품: Redux, useContext 등.. 2. 설치 ​ Recoil 패키지는 npm에 존재한다. 안정한 최신 버전을 설치하기 위해서는 아래의 명령어를 실행 npm install recoil yarn yarn add recoil 3. Root​ recoil 상태를 사용하기 위해선 컴포넌트가 로 감싸져있어야 한다. 최상단에서 감싸주자. import React from 'react'; import { RecoilRoot, } from 'recoil'; function App() { return ( ); } 리코일은 크게 상태를 나타내는 Atom과 상태의 변화를 나타내는 Selector로 구성 4. A..

1. 파이어스토어 > 게시물 콜렉션 > 좋아요 필드 추가 - 게시물을 생성할 때, 게시물마다 좋아요 수 및 좋아요한 유저(id)를 담을 수 있는 배열 추가. - 업데이트 될때마다 관련없는 데이터까지 불러오는게 싫으면 콜렉션을 따로 만들어도 됨. /* firestore 추가 */ const docRef = await addDoc(collection(db, "feeds"), { createdAt: Timestamp.now(), creatorId: nowUser.id, feedText: feedText, imgUrl: imgUrl, nickName: nowUser.nickName, likes: { likeUsers: [], likeCount: 0, }, comments: [], }); 아래처럼 추가됨 2. 좋..

1. useContext 왜 써? prop Chain 방지 부모에서 자식 컴포넌트로 데이터를 전달하려면 props를 통해 전달하는데 그 깊이가 깊어지면 거쳐가는 컴포넌트가 많아지고 심지어 통과용으로만 전달하는 컴포넌트도 생기며 코드도 반복적으로 작성해줘야 한다. 그리고 이과정에서 변수명이 변경되면 하나하나 변경해주고 이 위치에서 어떤 이름이었는지 기억해야하는 등 번거로운 일이 발생한다. 2. 사용법 1) createContext() : 컨텍스트 생성 컨텍스트용 파일을 따로 생성해도 되고 아님 최상위 위치에서 선언해도 된다 createContext(괄호) 괄호 안의 값은 디폴트값이며 컨텍스트에 벨류로 아무것도 넣어주지 않았을 때 디폴트값을 반환한다. import { createContext } from "..

1. Portal 은 부모 컴포넌트 DOM 계층 구조 밖으로 자식을 랜더링한다 모달의 위치는 어떤 것에도 간섭받지 않는 root 밖으로 와야 한다. id 값으로 포탈 위치를 정할 수 있는데, 위치는 root에 간섭받지 않도록 root와 형제자리로 한다. index.html DOCTYPE html> React App You need to enable JavaScript to run this app. 2. 모달 컴포넌트에서 ReactDOM을 호출하고 CratePortal 메소드를 실행한다. Modal.js (모달 컴포넌트 = 현재 코드에선 모달 '프레임'으로 이제 이걸로 원하는 컴포넌트를 감싸면 됨) import { Fragment } from "react"; import ReactDOM from "reac..

JSX의 메이저 제한 사항은 '하나의 엘리먼트만 반환'한다는 것이다. so, 마지막엔 하나의 태그로 감싸줘야 하는데, 이게 쌓이면 Soup 라고 불리는 div 지옥에 빠질 수 있고 내 앱의 속도는 그만큼 느려질 수 있다. ... 가능하면 의미없는 감싸는 div를 줄여주자. 1. Wrapper 컴포넌트로 감싼다. 1) children은 내 아래있는 모든 JSX 요소들을 포함시킨다. 2) 이 컴포넌트는 단순히 내가 포함한 것을 반환하기만 한다. export default function Wrapper(props){ return props.children; } 2. 빈태그 로 감싼다. return 3. 또는 로 감싼다. 1) import React from 'react' => React.Fragment 로 쓸..

1. css 파일명에 module을 추가한다. *변경 전: Button.css *변경 후: Button.module.css 2. 컴포넌트에 css import 구문을 수정한다. *변경 전: import "./Button.css" *변경 후: import styles from "./Button.module.css" 3. 컴포넌트에서 css 사용할 태그의 클래스명을 변경한다. *변경 전 : className="button" *변경 후: className={styles.button} import React from 'react'; import styles from './Button.module.css'; const Button = props => { return ( {props.children} ); }; e..

회원가입을 하다보면 내가 양식에 맞는 입력값을 넣기 전까지 INPUT 창이 붉은색으로 나타나는 경우를 종종 봤을 것이다. 이처럼 조건이나 상황에 따라 스타일이 동적으로 변하도록 설정하는 방법을 알아보자. 0. 들어가며 동적으로 CSS를 설정하는 방법은 태그에 인라인으로 직접 설정하는 방법도 있으나 인라인 스타일은 모든 css 설정 중 최우선으로 여겨지기 때문에 주의가 필요하다. Course Goal 1. 요약 스위치 역할을 하는 조건을 하나 만들고 그 조건을 클래스에 넣어 스위치에 따라 클래스에 조건이 붙어다 안붙었다. 하는 식으로 만든다. 2. 클래스에 벡틱과 삼항연산자를 활용하여 상황에따라 클래스가 추가되고 안되고를 설정한다. *클래스를 추가하려면 띄어쓰기 한번해야하는 것을 잊지 말자. Course ..

회원가입을 하다보면 내가 양식에 맞는 입력값을 넣기 전까지 INPUT 창이 붉은색으로 나타나는 경우를 종종 봤을 것이다. 이처럼 조건이나 상황에 따라 스타일이 동적으로 변하도록 설정하는 방법을 알아보자. e.g. State 불리언 타입으로 조건 설정해보자 - isValid가 true, false 일 경우 CSS를 설정할 수 있다. state 선언 const [isValid, setIsValid] = useState(true) CSS 선언 Course Goal - 보면 label 은 isValid가 false 일때 글자색이 red, true일때 black 으로 나오도록 했다. - 마찬가지로 input 창의 보더 컬러도 isValid가 false 일때 red, true일때 black 으로 나오도록 했다. 조..

1. 양방향 바인딩이 왜 필요함? 어떠한 '결과 값'이 있으면 그걸 input -> output 방향에서만 바꿀 수 있는 게 아닌 (단방향 바인딩) 다른 방향(부모자식 간에도)에서도 값을 바꿀 수 있고 그 값은 모든 방향에서 하나로 이어져있도록 함. 예를 들면, input 창들이 있는데 제출 버튼을 누르면 input에 작성 내용이 모두 clear 됨. 2. 초간단 사용법 1) useState로 state 생성 2) 이벤트 핸들러 함수로 setter 함수에 event.target.value 벨류 값 넣어줌 (이벤트 발생하면 state가 변경) 3) 이벤트가 발생하는 태그의 value (value가 아닌 경우도 있음) 속성에 state를 넣음 (setter 함수에 의해 변경되면 원래 value도 바뀌도록) ..