본문 바로가기

전체 글

 (40)
[React] useState() 1.useState가 필요한 이유 function App() { let content = 'init content' function handleSelect(){ content = 'update content' } return { {content} } } 1).잘못된 구현 : content의 값이 화면에서 업데이트 되지 않음. 즉 return()내의 jsx 코드가 한번만 실행되어 UI가 업데이트 되지 않음 > 모든 JSX코드가 재평가되지 않음 2). 값이 업데이트 되지 않는 이유 : 리액트는 JSX 코드를 보고 현재 렌더링된 UI와 비교하기 때문에 UI를 업데이트 하려면 리액트에 의해 재평가 되어야 함. 3). 해결방안 : useState(); (1). 리액트 라이브러리에서 불러와야하는 특별한 함수의 도움..
[React] 동적인 eventHandler 구현 시 주의 잘못된 구현 function handleClick(){ console.log('click'); } {children} -> 잘못된 구현인 이유 : handleClick()은 이 코드 라인이 실행될 때 이 함수가 바로 실행됨. (화면이 렌더링 될때) 올바른 구현 {children} -> 단순히 함수 이름을 사용 > onClick값으로서의 함수를 전달 > 리액트에 의해 시스템뒤에서 실행됨
[React] 컴포넌트, index.html, index.jsx, jsx 특징, React 실행방식 1.Components 1). 특징 (1). Html, css, js 가 합쳐져 UI 한 부분을 규정하고 조정 (2). UI를 관리하기 쉽도록 작게 분해하여 UI의 다른 위치에도 사용할 수 있게 해줌 (3). 비슷한 코드가 한곳에 저장됨 (한 파일에 js, html,css 같이 작성 가능) (4). 디자인과 개발 원칙을 따름 (5). 커스텀 컴포넌트는 실제로 렌더링 된 DOM에 나타나지 않음 기본 HTML요소만 존재 (6). 컴포넌트 트리는 리액트가 분석하고, 리액트는 모든 컴포넌트에서 나온 모든 JSX코드를 결합하여 전반적인 DOM을 생성(화면에 보이는 요소) 2). 규칙 (1). 함수의 제목이 대문자로 시작해야함 - div, image와 같은 내장요소는 소문자로 시작, 리액트에게 내장된 컴포넌트가 아..

티스토리툴바