React24 리액트 공식 문서 번역-08. 컴포넌트 순수성 유지하기 일부 JavaScript 함수는 순수 함수(pure function)입니다. 순수 함수는 계산만 수행하고 그 이상의 작업을 수행하지 않습니다. 컴포넌트를 순수 함수로 엄격하게 작성함으로써 코드베이스가 커져도 이해하기 어려운 버그와 예측할 수 없는 동작을 피할 수 있습니다. 그러나 이러한 이점을 얻으려면 몇 가지 규칙을 준수해야 합니다. Purity: 컴포넌트를 공식(formula)으로 만들기 컴퓨터 과학에서 (특히 함수형 프로그래밍의 세계에서), 순수 함수는 다음과 같은 특성을 갖는 함수입니다 자신만의 일을 처리합니다. 호출되기 전에 존재했던 객체나 변수를 변경하지 않습니다. 동일한 입력에 대해 동일한 출력을 반환합니다. 같은 입력이 주어지면, 순수 함수는 항상 동일한 결과를 반환해야 합니다. 순수 함수.. 2023. 7. 10. 리액트 공식 문서 번역-07. 렌더링 목록 데이터 컬렉션에서 여러 유사한 컴포넌트를 표시해야 할 경우가 자주 있습니다. JavaScript 배열 메서드를 사용하여 데이터 배열을 조작할 수 있습니다. 이 페이지에서는 React와 함께 filter() 및 map()을 사용하여 데이터 배열을 필터링하고 변환하여 컴포넌트 배열로 만듭니다. 어레이에서 데이터 렌더링 콘텐츠 목록이 있다고 가정합니다. Creola Katherine Johnson: mathematician Mario José Molina-Pasquel Henríquez: chemist Mohammad Abdus Salam: physicist Percy Lavon Julian: chemist Subrahmanyan Chandrasekhar: astrophysicist 이 목록 항목들 중 유일한.. 2023. 7. 9. 리액트 공식 문서 번역-06. 조건부 렌더링 React에서 컴포넌트는 다양한 조건에 따라 다른 것을 표시해야 할 때가 많습니다. React에서는 if 문, && 연산자, ? : 연산자와 같은 JavaScript 구문을 사용하여 조건부로 JSX를 렌더링할 수 있습니다. 조건부 JSX 반환 PackingList 컴포넌트가 여러 개의 Item 을 렌더링하고, 각 항목은 "packed" 여부를 나타낼 수 있다고 가정해 보겠습니다. https://codesandbox.io/s/dm1ez5?file=/App.js&utm_medium=sandpack heuristic-rumple-dm1ez5 - CodeSandbox heuristic-rumple-dm1ez5 using react, react-dom, react-scripts codesandbox.io 일부 I.. 2023. 7. 9. 리액트 공식 문서 번역-05. 컴포넌트에 프롭스 전달하기 React 컴포넌트는 서로 통신하기 위해 props를 사용합니다. 부모 컴포넌트는 자식 컴포넌트에게 props를 제공하여 정보를 전달할 수 있습니다. Props는 HTML 속성을 생각나게 할 수 있지만, 객체, 배열 및 함수를 포함한 JavaScript 값 모두를 props를 통해 전달할 수 있습니다. https://codesandbox.io/s/qdv180?file=/App.js&utm_medium=sandpack stupefied-shadow-qdv180 - CodeSandbox stupefied-shadow-qdv180 using react, react-dom, react-scripts codesandbox.io 태그에 전달할 수 있는 props는 미리 정의되어 있습니다(ReactDOM은 HTML .. 2023. 7. 9. 이전 1 2 3 4 5 6 다음
