카테고리 338 [React] 컴포넌트의 순수함 : 컴포넌트는 순수해야한다. 컴포넌트의 순수함리액트에서 컴포넌트는 순수해야한다.여기서의 "순수함" 이란 javascript에서의 순수함수와 동일한 의미로 아래 두 가지를 지켜야한다.자신의 일에 집중한다. : 함수가 호출되기 전에 존재했던 어떤 객체나 변수는 변경하지 않아야한다.같은 입력, 같은 출력 같은 입력이 주어졌다면 같은 결과를 반환해야 한다. 리액트는 컴포넌트가 순수하다는 것을 전제로 동작한다.때문에 개발자는 컴포넌트를 같은 입력에 대해서 같은 결과를 내놓도록 작성해야한다. 특히 컴포넌트 외부의 변수나 함수를 수정하지 않는 것이 중요하다. 또한 컴포넌트가 특정 순서로 렌더링 되리라 기대하면 안된다. 즉, 각 컴포넌트가 렌더링 중에 다른 컴포넌트에 의존하면 안되고 자체적으로 JSX를 연산해야한다. 나쁜 예시let guest =.. 2025. 1. 3. [React] 0(숫자) && <Component/>은 0을 렌더링한다. &&을 이용한 조건부 렌더링조건부 렌더링을 할 때 count && 와 같이 사용하는 경우가 있다. 이 때 count가 0이라면 boolean으로 판단되어 아무것도 렌더링되지 않는 것이 아니라, "0" 그 자체가 노출된다. 이유이건 javascript의 조건문 처리 결과에 의함이다. javascript는 && 연산자를 계산할 때 왼쪽에서 오른쪽으로 평가하며 처음 만나는 falsy한 값을 반환한다.falsy한 값은 다음과 같다.false;null;NaN;0;빈 문자열 ("" or '' or ``);undefined. 0은 falsy한 값이기 때문에 0 && 의 결과로 0을 반환하게 되는 것이다. &&에 대한 자세한 내용은 아래를 참고하자.https://developer.mozilla.org/ko/docs/.. 2025. 1. 3. [React] 다른 방식으로 조건부 렌더링을 하는 컴포넌트는 동일할까? 조건부 렌더링조건부 렌더링을 하는 방식은 여러가지가 있을 수 있다.if를 사용하는 방법, &&를 사용하는 방법, 삼항연산자를 사용하는 방법 등 말이다. 질문다른 방식으로 조건부 렌더링을 하는 컴포넌트는 "완전히 동일"할까? 예를 들어, 아래 컴포넌트 2개가 있다고 하자.아래 두 컴포넌트는 동일한걸까?if (isPacked) { return {name} ✅;}return {name}; return ( {isPacked ? name + ' ✅' : name} ); 정답정답은 "동일하다" 이다.JSX 엘리먼트 내부는 상태를 보유하지 않고 실제 DOM 노드가 아니기 때문에 동일하다고 볼 수 있다. 만약 내부적으로 상태를 갖고 있었다면 (각기 다른 상태를 가질 수 있기 때문에) 다르다고 볼 수 있을 .. 2025. 1. 3. [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. 이전 1 2 3 4 ··· 68 다음
