React11 [react] Render Props Render Props란? "render prop"란, React 컴포넌트 간에 코드를 공유하기 위해 함수 porps를 이용하는 간단한 테그닉이다. render props를 사용하는 라이브러리는 React Router, Downshift, Formik가 있다. 횡단 관심사(Cross-Cutting Concerns)를 위한 render props 사용법 횡단 관심사 : 핵심적인 기능이 아닌 중간중간 삽입되어야 할 기능들을 횡산관심사라고 한다. 컴포넌트는 React에서 코드의 재사용성을 위해 사용하는 주요 단위 하지만 컴포넌트에서 캡슐화된 상태나 동작을 같은 상태를 가진 다른 컴포넌트와 공유하는 방법이 항상 명확하지 않다. //아래 컴포넌트는 웹어플리케이션에서 마우스 위치를 추적하는 로직 class .. 2023. 5. 19. [react] Form 제어 컴포넌트(Colltrolled Component) HTML에서 , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에서 유지되며 setState()이 의해 업데이트 React state를 "신뢰 가능한 단일 출처(single source of truth)"로 만들어 두 요소를 결합, 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 "제어 컴포넌트(controlled component)"라고 한다. class NameForm extends React.Component { .. 2023. 5. 19. [react] 리스트와 Key 여러개의 컴포넌트 렌더링 하기 엘리먼트 모음을 만들고 중괄호 { } 를 이용하여 JSX에 포함 시킬 수 있다. const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} ); ReactDOM.render( {listItems}, document.getElementById('root') ); Key Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것 Key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정 Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용, 대부분의 경우 데이터의 ID를 Key로 사용 렌더.. 2023. 5. 18. [react] 조건부 렌더링 React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작 if 나 조건부 연산자와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트로 제작가능 function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; } return ; } ReactDOM.render( // Try changing to isLoggedIn={true}: , document.getElementById(.. 2023. 5. 17. 이전 1 2 3 다음