🍒 Chae-ri Dev 🍒

React Context API란?컴포넌트에 props를 직접 전달하지 않고 여러 컴포넌트 간에 전역으로 상태를 쉽게 공유하고 관리할 수 있게 해준다.일반적으로 React에서는 데이터를 위에서 아래로(부모 -> 자식) props를 통해 전달하는데, 실제로 개발을 하다보면 목표 컴포넌트까지 props를 전달해주기 위해 여러 컴포넌트를 통과해야 하는 props drilling 문제가 발생하게 된다. 이 문제를 해결하기 위해 전역으로 관리할 수 있게 React에서 만든 것이 바로 Context API이다.주로 UI 테마(라이트 모드, 다크 모드 등), 언어 설정, 인증된 사용자 등 전역으로 사용될 수 있는 상태를 공유할 때 사용된다. 그렇다면 전역 상태 관리를 할 때 사용하면 되는가?그건 아니다.전역으로 관리..

코드를 이쁘게 포맷팅해주는 prettier에 관련된 포스트이다.{ "trailingComma": "es5", "printWidth": 100, "semi": true, "singleQuote": true, "tabWidth": 2, "arrowParens": "always", "endOfLine": "auto"} 나는 위 옵션을 자주 사용한다. 위 옵션들을 포함한 그 외 옵션들에 관해서는 다음과 같다.{ "arrowParens": "always", // 화살표 함수의 매개변수가 하나일 때 괄호를 사용할지 여부 "bracketSpacing": true, // 객체 리터럴에서 중괄호 내부에 공백 삽입할지 여부 "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 ..

module.exports = { root: true, env: { browser: true, es2020: true }, parser: '@typescript-eslint/parser', ignorePatterns: ['dist', '.eslintrc.cjs'], plugins: ['react-refresh', 'react-hooks', 'import', 'react', 'prettier'], extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:import/recommended', 'prettier', ], ..