본문 바로가기
728x90

Frontend46

9. 합성 (Composition) 리액트에서 합성(Composition)이란 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것이다.여러 개의 컴포넌트를 어떻게 조합할 것인지에 따라 합성의 사용 기법이 다음과 같이 다양하다. Containment하위 컴포넌트를 포함하는 형태의 합성 방법이다. props.children을 사용하면 해당 컴포넌트의 하위 컴포넌트가 모두 children으로 들어오게 된다. function FancyBorder(props) { return ( {props.children} );}//FancyBorder 컴포넌트 활용functino WelcomeDialog(props) { return ( 어서오세요 우리 사이트에 방문하신 것을 환.. 2024. 8. 1.
8. 제어 컴포넌트 Controlled Components (제어 컴포넌트)는 값이 리액트의 통제를 받는 Input Form Element이다.HTML 폼에서는 각 엘리먼트가 자체적으로 state를 관리한다. 이 경우 자바스크립트 코드를 통해 각각의 값에 접근하기 어렵다. 제어 컴포넌트에서는 모든 데이터를 state에서 관리한다. 사용자의 입력을 직접적으로 제어할 수 있다.   input 태그사용자 입력이 발생하면 event 객체를 이용해 setState()를 호출하여 사용자의 입력을 자신의 state로 저장하고, 상태값을 엘리먼트의 value 속성값으로 나타낸다. export default function App(){ const [input, setInput] = useState(""); const onChange .. 2024. 8. 1.
7. key, map 1. Keykey는 각 객체나 아이템을 구분할 수 있는 고유한 값이다.key의 값은 같은 리스트에 있는 elements 사이에서만 고유한 값이면 된다.ex) 주민등록번호, 학번, 핸드폰번호 2. map()배열에 있는 각 변수에 처리를 한 뒤에 리턴하는 함수즉, 배열을 가공하여 새 배열을 만드는 함수forEach() 함수와 같은 결과값을 출력하지만, map을 이용하면 불변 변수(const)만을 사용하여 결괏값을 바로 반환한다mapping : 한쪽 아이템과 다른 한쪽 아이템을 짝지어 주는 것map() 함수 안에 있는 elements는 꼭 key가 필요하다.//key로 값 사용const numbers = [1,2,3,4,5];const listItems = numbers.map((numbers) => .. 2024. 8. 1.
6. 조건부 렌더링 Conditional Rendering Conditional Rendering (조건부 렌더링)은 조건에 따라 렌더링의 결과 달라지도록 하는 것이다.Truthy : true는 아니지만 true로 여겨지는 값   ex) true, {}, [], 42(number), "0" (String), "false" (String)Falsy : false는 아니지만 false로 여겨지는 값   ex) false, 0,-0, ' ', " ", null, undefined, NaN Inline Conditions 코드를 별도로 분리된 곳에 작성하지 않고 해당 코드가 필요한 곳 안에 직접 집어 넣는 것이다.   cf) && (logical and 연산) true && expression -> expressionfalse &.. 2024. 8. 1.
728x90

티스토리툴바