분류 전체보기55 [React] List 렌더링과 key 리액트에서는 유사한 형태의 여러 데이터를 순회형 데이터로 만들어 간편하게 JSX를 렌더링 할 수 있다. 배열 데이터 렌더링 콘솔에 key prop 에러가 뜬 것을 볼 수 있다. map() 메서드로 렌더링 된 JSX 요소들은 반드시 고유의 key 속성을 가지고 있어야 한다. 이는 추후에 데이터가 삭제, 수정될 때 기존의 순서나 불변 데이터를 올바르게 유지하기 위해 쓰인다. key 값은 같은 map() 메서드로부터 렌더링 되는 배열의 요소들 간에는 고유해야 하나, 다른 데이터나 배열로부터 렌더링 된 JSX 요소의 key 값과는 중복되어도 무관하다. 구조화된 데이터 필터링 데이터에 포함된 값을 key 값에 할당해 주었다. 그 외에 컴포넌트 내에서 uuid (crypto.randomUUID) 등과 같은 값을 생.. 2023. 6. 29. [React] 조건부 렌더링 리액트에서 조건문을 잘 활용하면 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다. 그 방식은 조건부로 JSX를 반환하거나 JSX 구문을 조건문에 포함하는 두 가지로 나뉜다. 1. 조건부로 JSX 반환하기 1) 조건별 항목 구분 2) 조건에 따라 아무것도 반환하지 않는 컴포넌트 2. 조건문에 JSX 포함하기 1) 삼항연산자 활용 2) 논리곱 연산자 활용 3) JSX를 조건부로 할당 2023. 6. 23. [React] 이벤트 처리하기_2 Event Propagation in React 리액트의 이벤트는 DOM을 타고 전파되는 특성이 있다. function Toolbar() { return ( { alert('You clicked on the toolbar!'); }}> alert('Playing!')}> Play Movie alert('Uploading!')}> Upload Image ); } 위와 같이 button 태그를 감싼 div 태그에 이벤트가 부착되어 있을 때 button 태그를 클릭할 경우 div 태그의 이벤트도 같이 실행된다. 이를 이벤트 전파 또는 이벤트 버블링이라 한다. (onScroll 이벤트는 해당 태그에서만 실행된다. 이를 제외한 모든 이벤트는 전파된다.) 이벤트 전파를 막기 위해서는 이벤트 전파가 일어나지 않아야 .. 2023. 5. 8. [React] 이벤트 처리하기_1 Event Handler in React 리액트는 jsx에 이벤트 핸들러를 등록할 수 있게 해 준다. 이벤트 핸들러는 클릭이나 마우스오버, 값 입력 등에 대해 반응할 수 있게 만드는 함수이다. //button 태그에 alert 이벤트를 등록해주는 함수 handleClick export default function Button() { function handleClick() { alert('You clicked me!'); } return ( Click me ); } 일반적으로 컴포넌트 내부에서 정의해서 사용하며 이름을 handle로 시작하는 단어로 정하는 것이 컨벤션에 더 적합하다. 아래와 같이 jsx 내부에서 인라인 방식으로 이벤트 핸들러를 정의할 수도 있다. //화살표 함수 사용 { alert('Y.. 2023. 4. 24. [React] React Hook_useRef useRef 렌더링을 유발하지 않는 값을 저장하는 변수이다. 본질적으로는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자와 같다고 생각하면 된다. 값을 참조하거나 DOM을 조작하거나 참조값의 재생산을 방지하는 역할을 한다. 특징들을 종합적으로 살펴보았을 때 참조 값이 갱신되어도 컴포넌트가 리렌더링 되거나 갱신을 알 수 있는 어떤 동작이 이루어지지 않는다는 것을 알 수 있다. function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); }; .. 2023. 4. 12. 이전 1 2 3 4 ··· 11 다음