Frontend 4 [React] 더 나은 상태(state) 관리하기 목표상태를 여러개 사용하다보면 상태 간 "꼬임"이 발생할 수도 있고 동기화를 놓쳐버려서 오류를 야기할 수도 있다.따라서 오류를 최소화하기 위해서 state를 단순화시키고 불필요한 state는 제거하는 것이 좋다. 데이터베이스 구조를 정규화해서 버그 발생 가능성을 줄이는 것과 유사하다. 방법들더 나은 상태를 관리하는 가장 좋은 방법은 state를 최대한 단순하게 만드는 것 이다. 연관된 state 그룹화 : 항상 한번에 업데이트해야하는 상태값들이 있다면 여러 개의 state로 분리하는 것 보다 하나의 object로 묶어서 하나의 state로 관리하자.state의 모순 피하기 : 서로 다른 상태 간에 논리적으로 불가능한 값을 가질 수 있는 환경을 제거하자.불필요한 state 제거하기 : 렌더링 중에 컴포넌트.. 2024. 11. 8. [React] Controlled, Uncontrolled Component Controlled, Uncontrolled ComponentControlled와 uncontrolled는 엄밀히는 기술 용어가 아니다. (사실상 디자인 패턴에 가깝다) 개념상 아래처럼 2개로 나누지만, 무조건 둘 중 하나로 구분되는 것이 아니라 하나의 컴포넌트에 두개의 개념이 혼재될 수 있다. controlled component : 중요한 정보가 local state가 아닌 props에 의해 만들어지는 컴포넌트uncontrolled component : local state를 이용하여 내부적인 정보를 관리하는 컴포넌트 예시예를 들어, TextField라는 컴포넌트가 있을 때 이 컴포넌트를 이루는 중요한 정보는input 태그에 보여줄 정보인 value와사용자가 input 이라는 행위를 이루었을 때 .. 2024. 10. 7. [CSS] 선택자 선택자 태그로 선택 특정 태그로 작성된 요소들을 선택한다. 태그종류 {...}로 사용할 수 있다. 예를 들어, div {...}는 div 태그로 작성된 요소들을 선택한다. id로 선택 특정 id를 갖는 요소들만 선택한다. #id이름 {...}으로 사용할 수 있다. 예를 들어, #root {...}는 root라는 id를 가지는 요소를 선택한다. 하나의 id는 하나의 요소에만 해당하고, 하나의 요소는 최대 하나의 id만 갖는 것을 원칙으로 한다. class로 선택 특정 class를 갖는 요소들만 선택한다. .class이름 {...}로 사용할 수 있다. 예를 들어, .parent {...}는 parent라는 클래스에 해당하는 요소들만 선택한다. 복합 선택 여러 속성/특성들을 함께 지니고 있는 요소들을 선택할 .. 2023. 3. 21. Vue.js 기본 Vue.js Vue는 React와 함께 주로 사용되는 frontend framework이다. 데이터가 변경되었을 때 그 부분만 따로 수정하거나 리렌더링할 수 있도록 해주는 등의 reactivity를 위해서 사용된다. Vue.js 공식 레퍼런스 Vue.js - The Progressive JavaScript Framework | Vue.js Versatile A rich, incrementally adoptable ecosystem that scales between a library and a full-featured framework. vuejs.org Vue.js 스타일 가이드 Style Guide — Vue.js Vue.js - The Progressive JavaScript Framework v2.. 2023. 3. 17. 이전 1 다음
