리액트에서 JSX 문법이 어떻게 사용되나요?⭐️ JSX의 기본 구조: JSX는 JavaScript 내에서 HTML과 유사한 문법을 사용합니다. JSX 엘리먼트는 각각 하나의 컴포넌트를 나타냅니다. JSX에서 자바스크립트 표현식 사용: JSX 내에서 자바스크립트 표현식을 사용하기 위해 중괄호 { }를 사용합니다. 이를 통해 동적 데이터를 JSX에 삽입하거나 JavaScript 함수 및 연산을 실행할 수 있습니다. 조건부 렌더링: JSX 내에서 조건부 렌더링은 삼항 연산자나 조건문(if-else)을 사용하여 구현할 수 있습니다. 반환하는 엘리먼트 제한: JSX 함수나 컴포넌트는 하나의 최상위 엘리먼트로 감싸져야 합니다. 두 개 이상의 엘리먼트를 반환할 때는 반드시 부모 엘리먼트로 감싸야 합니다. 왜 stat..

props와 state의 차이는 무엇인가요? state는 컴포넌트 내부에서 관리되는 데이터로 값이 변경되었을때 리렌더링이 되고 props는 상위컴포넌트에서 자식 컴포넌트로 값을 전달해주는것으로 읽기 전용으로 전달되기 때문에 자식 컴포넌트에서 해당 값을 변경할 수 없다. pure component에 대해 설명해주세요. setState가 호출될 때 항상 render함수가 호출된다. 렌더링 여부를 제어하기 위해 sholdComponentUpdate 함수를 이용할 수 있지만 sholdComponentUpdate 함수를 정확하게 정의하지 못하는 경우 렌더링이 필요한 경우에 안되는 버그를 만드는 실수를 하기 쉽다 이럴 경우 PureComponent를 이용할 수 있다. PureComponent는 props나 stat..

Virtual DOM 이 무엇인지, Virtual DOM 작동 원리에 대해 설명해주세요. 가상돔이란 실제 DOM과 구조가 완벽히 동일한 복사본 형태입니다. 객체(object) 형태로 메모리에 저장되기 때문에 실제 DOM을 조작하는 것 보다 훨씬 더 빠르게 조작을 수행할 수 있습니다. 처음 웹을 실행하면 가상 DOM이 생성됩니다. 사용자가 동작 또는 데이터 변경으로 인해 웹의 상태가 변경되면 실제 DOM을 직접 수정하지 않고 상태가 update된 새로운 가상 DOM을 생성됩니다. 이후 가상 DOM과 새로운 가상 DOM간의 차이를 비교하고 변경된 부분을 실제 DOM에 Batch Update로 반영합니다. ⭐️React를 사용하는 이유에 대해 말씀해주세요. React는 가상 DOM을 사용하여 실제 DOM조작을..

공통의 컴포넌트에선 전달받는 Props의 타입이 두 가지였고 그 데이터가 다시 각기 다른 컴포넌트로 전달될 때 두 가지 타입 중 하나의 타입을 전달해야 했는데 type narrowing이 필요했다. 내가 지정한 interface의 타입이라 타입추론이 안됐다. 이때 type assertion을 이용해 보내는 데이터의 타입을 지정해 줬다. type assertion은 개발자가 컴파일러에게 변수나 표현식의 타입을 명시적으로 알려주는 것을 말한다. 각괄호 문법과 as키워드를 사용할 수 있지만 as키워드를 사용한 방식이 현대적이고 JSX와도 호완성이 좋아 권장되는 방법이다. 주의할 점은 type assertion을 남용하면 오히려 타입 안정성이 감소할 수 있다. 컴파일러가 올바른 타입을 추론하지 못하게 하거나, ..

tailwindCSS를 사용하던 도중 Props로 받아온 데이터들로 수치를 지정해 className을 부여했지만 실제 HTML 요소에 반영이 되지 않는 문제가 발생했다. 그래서 Tailwind CSS의 작동 방식을 찾아보니 정규표현식을 통해 HTML상에서 class일 수 있는 모든 단어들을 가져온 뒤 해당 단어가 TailwindCSS에서 인식되면 그걸 CSS로 변환하는 방법으로 작동한다. 즉 class에 작성된 내용을 코드적으로 분석하거나 파싱하는 게 아니고 단어를 있는 그대로 이해하고 적용된다는 의미다. 그래서 이런식으로 class명 내에서 조건문을 사용하게 되면 Tailwind CSS는 이를 인식하지 못하고 건너뛰어버린다. 그래서 tailWindCSS로 동적 스타일링을 하기 위해선 변수와 함수를 이용..

팀원들과 협업하다 보면 종종 import 구문 순서가 맞지 않아 병합 과정에서 충돌이 나는 경우가 있었다. import 구문 순서를 맞출 수 있을까? 이럴 때 유용한게 eslint이다. eslint는 코딩 컨벤션에 위배되는 코드나 패턴을 자동 검출해준다. 대부분의 IDE 위와 같은 코드를 자동으로 고쳐주는 autofix를 제공한다. vscode에서는 settings.json에 "editor.codeActionsOnSave": { "source.fixAll.eslint": true } 옵션을 추가해주면 autofix가 적용된다.