beomy

같은 데이터를 여러 컴포넌트에서 사용해야 할 때가 있습니다. 이 경우 각각의 컴포넌트가 동일한 값을 가지고 있는 방법이 있지만, 이 방법 보다도 공통 부모 컴포넌트가 진실의 근원(source of truth)이 되어 자식 컴포넌트에게 (parent -> child 방향으로) 데이터를 흘려보내는 방법이 더욱 좋습니다. 사용자의 입력값을 소문자, 대문자로 변경해 보여주는 컴포넌트를 만들어 보겠습니다. 1. Data flow (top-down data flow) 작성할 코드의 구조는 아래 그림과 같습니다. 부모 컴포넌트에서 자식 컴포넌트로 데이트를 흘려보내야 합니다. function TextLength(props) { return Text lenght : {props.text.length} } class Te..