리액트8 구성 (composition) vs 상속 (inheritance) React는 강력한 구성 모델을 가지고 있으며 상속 대신 구성을 사용하여 컴포넌트 사이의 코드를 재활용하는 걸 권장합니다. 이 섹션에서는 React를 새로 접한 개발자들이 상속을 대할 때 겪는 몇가지 문제점에 대한 고려사항과 구성으로 어떻게 해결했는 지 보여줍니다. 방지 (Containment) 일부 컴포넌트는 자식을 미리 알 수 없습니다. 이는 일반적으로 “박스”로 나타나는 Sidebar나 Dialog같은 컴포넌트에서 특히 일반적입니다. 이러한 컴포넌트는 특수한 children prop을 사용하여 자식 요소를 출력에 직접 전달하는 것이 좋습니다. function FancyBorder(props) { return ( {props.children} ); } 이렇게 하면 JSX를 중첩하여 다른 컴포넌트가 임.. 2021. 2. 2. State 끌어올리기 가끔 일부 컴포넌트가 동일한 변경 데이터를 보여줘야 할 필요가 있습니다. 이럴 때 공통 조상에 state를 끌어올리는 걸 권장합니다. 어떻게 하는지 살펴봅시다. 이 섹션에서는 주어진 온도에서 물의 끓음 여부를 확인하는 온도 계산기를 작성합니다. 먼저 BoilingVerdict 컴포넌트로 시작합니다. 이 컴포넌트는 prop으로 celsius 온도를 받고, 물이 충분히 끓었는 지 표시합니다. function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return The water would not boil.; } 그리고 나서, Calculator 컴포넌트를 만듭니다. 이 컴포넌트는 온도를 입력받을 을 .. 2021. 1. 30. 폼 HTML 폼(form) 요소는 폼 요소 자체가 내부 상태를 가지기 때문에 React에서 다른 DOM 요소가 조금 다르게 동작합니다. 예를 들어, 순수한 HTML에서 이 폼은 이름을 받습니다. Name: 이 폼은 유저가 폼을 전송(submit)하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행합니다. 만약 React에서 동일한 동작을 원한다면, 그냥 동작합니다. 그러나 대부분의 경우 form 제출을 처리하고 사용자가 form에 입력한 데이터에 접근할 수 있게하는 자바스크립트 함수를 가지는 게 편합니다. 이 동작을 위한 표준 방식은 “제어되는 컴포넌트 (Controlled Components)” 기법을 사용하는 것입니다. 제어되는 컴포넌트 (Controlled Components) HTML에서 , .. 2021. 1. 27. 리스트와 키 아래 코드에서 map()함수를 사용해서 numbers 배열을 얻은 뒤 그 값을 두배로 만들려고 합니다. map()이 반환하는 새 배열을 doubled 변수에 할당하고 로그를 남겨봅니다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); 콘솔에는 [2,4,6,8,10] 이라고 찍힐 겁니다. React에서 배열을 요소 리스트로 변환하는 건 거의 동일합니다. 다수 컴포넌트 렌더링 요소 컬렉션을 만들고 중괄호 {}를 사용하여 JSX에 포함 시키는 것이 가능합니다. 아래 예제에서는 자바스크립트 map()함수를 사용해서 numbers 배열을 순회합니다. 그리고 개별 아이템에.. 2021. 1. 24. 이벤트 제어 React 요소의 이벤트 제어의 특징은 아래와 같습니다. React 이벤트는 소문자 대신 camelCase를 사용합니다. JSX에 문자열 대신 함수를 전달합니다. function activateLaser(){...}; //HTML Activate Lasers //react Activate Lasers 다른 차이점으로는 React에서 기본 동작을 막기 위해 false 리턴을 사용할 수 없다는 것입니다. 반드시 명시적으로 preventDefault 를 호출해야 합니다. 예를 들어 HTML에서 새로운 페이지를 여는 기본 링크 동작을 막으려면 이렇게 작성할 수 있습니다. Click me React에서는 이렇게 작성합니다. function ActionLink() { function handleClick(e) { .. 2021. 1. 19. state와 lifecycle 이 섹션에서는 재사용가능하고 캡슐화된 Clock 컴포넌트를 만드는 방법에 대해 배우게 됩니다. 자체 타이머를 설정하고 매 초마다 스스로 업데이트합니다. function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } function tick() { ReactDOM.render( , document.getElementById('root') ); } setInterval(tick, 1000); 여기서 중요한 요구사항은 Clock이 타이머를 설정하고 매 초 UI를 업데이트 하는 것은 CLock의 구현 세부사항이어야 합니다. Clock은 한 번만 작성하고 자체적으로 업데이트 시킵니다. ReactDOM.rende.. 2021. 1. 16. 이전 1 2 다음
