<star />

리액트의 합성은 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것을 의미함. 합성이라고 해서 무작정 그냥 컴포넌트들을 붙이는 것이 아니라, 여러 개의 컴포넌트를 어떻게 조합할 것인가에 대한 고민이 필요함. 1) Containment 하위 컴포넌트를 포함하는 형태의 합성 방법. 리액트 컴포넌트의 props 에 기본적으로 들어 있는 children 속성을 사용하면 됨. function FancyBorder (props) { return ( {props.children} ) } 위 코드에서 FancyBorder 라는 컴포넌트에 props.children 을 사용하면 해당 컴포넌트의 하위 컴포넌트가 모두 children 으로 들어오게 됨. children 이라는 prop 은 개발자가 직접 넣는 게 아니라..

Shared State = 공유된 state 를 의미함. 자식 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트의 state 를 공유해서 사용하는 것. 어떤 컴포넌트의 state 에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우를 말함. 예제를 통해 컴포넌트들의 state 를 공유하는 방법에 대해서 자세히 살펴보쟈...🧐 1) 물의 끓음 여부를 알려 주는 컴포넌트 function BoilingVerdict(props) { if (props.celsius >= 100) { return 물이 끓는다.; } return 물이 안 끓어염.; } 섭씨 온도 값을 props 로 받아서 물이 끓는지, 안 끓는지를 문자열로 출력해 주는 컴포넌트임. function Calculator (props) {..

보통의 프로그래밍 언어에는 참, 거짓을 구분하기 위해서 Boolean 형태의 자료형이 존재한다. 그 값은 true 와 false 둘 중에 하나가 됨. 그리고 boolean 과 자료형이 다른 값을 비교하게 되면 오류가 발생하게 됩니다! 하지만, 자바스크립트에서는 true 는 아니지만, true 로 여겨지는 값이 존재하는데... 이것을 truthy 라고 부릅니다. 마찬가지로, false 는 아니지만 false 로 여겨지는 값을 falsy 라고 부릅니다. truthy 와 falsy 를 잘 이해하고 있다면 유용하게 사용할 수 있습니다. true {} (empty object) [] (empty array) 42 (number, not zero) "0", "false" (string, not empty) fals..

폼은 사용자로부터 입력을 받기 위해 사용함. 1) 제어 컴포넌트 > 사용자가 입력한 값에 접근하고, 제어할 수 있도록 해 주는 컴포넌트 제어 컴포넌트는 그 값이 리액트의 통제를 받는 입력 폼 엘리먼트 (input form element) 를 의미함. function NameForm (props) { const [value, setValue] = useState(''); const handleChange = (event) => { setValue(event.target.value); } const handleSubmit = (event) => { alert('입력한 이름: ' + value); event.preventDefault(); } return ( 이름 : 제출 ) } 위의 코드에서 태그의 valu..

리스트는 우리말로 목록. 컴퓨터 프로그래밍에서는 같은 아이템을 순서대로 모아 놓은 것이 리스트에 해당된다고 볼 수 있음. 리스트를 위해 사용하는 자료구조가 바로 배열(Array) 입니다. 배열은 자바스크립트의 변수나 객체를 하나의 변수로 묶어 놓은 것임. 키는 열쇠라는 의미. 열쇠는 모두 각자 고유하다. 컴퓨터 프로그래밍에서의 키는 각 객체나 아이템을 구분할 수 있는 고유한 값을 의미함. 리액트에서의 키는 리스트에서 아이템을 구분하기 위한 고유한 문자열이라고 이해하면 됨. 키의 값은 같은 리스트에 있는 엘리먼트 사이에서만 고유한 값이면 됨. const todoItems = todos.map((todo) => {todo.txt} ); 위의 코드처럼 키값으로 id를 사용하는 방식이 있음. id 의 의미 자체..

조건부 렌더링 (Conditional Rendering) 이 뭐야? 컴퓨터 프로그래밍에서의 컨디션은 조건을 의미합니다. 따라서 조건에 따른 렌더링이라고 해석하고, 조건부 렌더링이라고 줄여서 부름미다. 결론적으로 어떠한 조건에 따라서 렌더링이 달라지는 것을 의미하지요. 조건문의 결과는 true 아니면 false 가 나오는데, 이 결과에 따라서 렌더링을 다르게 하는 것을 조건부 렌더링이라고 정의합니다. function UserGreeting (props) { return 다시 오셨군여? } function GuestGreeting (props) { return 회원가입 하셈요. } function Greeting (props) { const isLoggedIn = props.isLoggedIn; if (is..