728x90 반응형 React23 [react] React에서 key의 역할과 컴포넌트를 다시 그리는 과정 발생한 이슈 팀 프로젝트를 진행하면서 key에 대해 간과하고 있던 점을 스스로 발견해버렸다. 그래서 기록을 남기고자 이렇게 작성을 하려고 한다. 나는 map을 사용할 때 key를 보통 map의 두 번째 인자인 index로 사용했다. 평소에는 문제가 되지 않았던 이슈가 이번 프로젝트에서는 이슈가 되어 돌아왔다. 제대로 정리하지 않으면 프로젝트를 할 때 헤맨다는 이유가 여기에서 나왔나 싶다,, 여러 들이 있고, 각각의 에는 삭제 버튼이 있다. 삭제 버튼을 클릭했을 때 클릭한 를 삭제하고 싶었다. 하지만 클릭한 가 삭제되지 않고, 다른 가 삭제되는 현상이 있었다. 왜 이러한 이슈가 발생한 건지 정리해보려고 한다. Key의 역할 공식문서에서는 key에 대해 이렇게 설명하고 있다. 그 중 위의 이슈와 관련성이 깊.. 2023. 2. 15. React Virtual DOM이란? DOM이란? 브라우저는 화면을 그리기 위해서 DOM(Document Object Model)이라는 개념을 사용한다. DOM은 HTML 파일 내용을 토대로 만들어지는데, JavaScript와 같은 언어로 수정할 수 있도록 만들어진 웹 페이지의 객체 지향 표현이다. DOM은 브라우저가 화면을 그리기 위해 필요한 정보가 트리 형태로 저장된 데이터다. DOM이 제공하는 API를 통해 DOM 구조에 접근하고, 원하는대로 변경할 수 있다. 이를 DOM 조작이라고 한다. Virtual DOM이란? React에서 Virtual DOM은 실제 DOM 내용에 기반하여 만들어진다. 실제 DOM과 같은 내용을 담고 있는 복사본이라고 생각하면 되는데 이 복사본은 실제 DOM이 아닌 JavaScript 객체 형태로 메모리 안에 .. 2023. 2. 8. [react] 중첩 삼항연산자 쓰는 법 + 단점 결론부터 말하면 {} 안에 ()를 써주면 된다. 중첩 삼항연산자를 쓰기 전 코드 {checked && message === '' && isDuplicate ? '다른 닉네임을 입력해주세요.' : ''} {checked && message === '' && !isDuplicate ? '사용가능한 닉네임입니다.' : ''} 중첩 삼항연산자를 쓴 후 코드 {checked && message === '' ? (isDuplicate ? '다른 닉네임을 입력해주세요.' : '사용가능한 닉네임입니다.') :''} + 중첩 삼항연산자를 쓰는 것이 더 좋을 줄 알고 리팩토링을 하려고 했던건데,(checked && message === '' 코드가 중복적으로 나오는 것이 보기 싫었다.) 오히려 코드의 가독성이 떨어진다는 .. 2023. 1. 29. 이전 1 2 3 4 5 다음 728x90 반응형
