전체 글

컴포넌트는 종종 서로 다른 조건에서 서로 다른 요소들을 보여줘야할 필요가 있어요. 리액트에서는 if문이나 &&, 그리고 ? : 연산자와 같은 자바스크립트 문법을 사용하여 JSX를 조건적으로 렌더링할 수 있어요. 이 페이지에서는 - 어떻게 조건에 맞춰 서로 다른 JSX를 반환하는지 - 어떻게 조건적으로 JSX 조각을 포함하거나 제외하는지 - 리액트 코드베이스에서 마주하게 될 흔한 조건부 구문 단축 를 알아볼 거예요. Conditionally returning JSX | 조건부로 JSX 반환하기 여러개의 Item들을 렌더링하는 PackingList 컴포넌트가 있고 이미 쌌는지 아니면 아직 싸지 않았는지를 표시할 수 있다고 가정해볼게요. 몇몇 Item 컴포넌트는 false가 아니라 true로 설정된 isPac..

리액트 컴포넌트는 서로 통신을 하기 위하여 props를 사용해요. 모든 부모 컴포넌트는 자식 컴포넌트에게 props를 내려서 정보를 전달해요. props라고 하면 HTML 속성을 생각하겠지만 props를 통해서는 객체, 배열 그리고 함수를 포함한 그 어떤 자바스크립트 값을 전달할 수 있어요. 이 페이지에서는 - 컴포넌트에 props를 어떻게 전달하는지 - 컴포넌트에서 props를 어떻게 읽는지 - props의 기본값을 어떻게 지정하는지 - JSX를 컴포넌트에 어떻게 전달하는지 - 시간이 지나면 props가 어떻게 변하는지 를 알아볼 거예요. Familiar props | 익숙한 props props는 JSX 태그에 전달하는 정보예요. 예를 들어, className, src, alt, width 그리고 h..

JSX는 자바스크립트 파일 안에서 HTML과 같은 마크업을 작성할 수 있게 만들어주고 이를 통해 렌더링 로직과 콘텐츠는 같은 곳에 들어가요. 때때로 약간의 자바스클비트 로직을 넣고 싶을 수도 있어요. 아니면 마크업 안에 있는 동적 속성을 참조하고 싶을 때도 있고요. 이러한 상황에서 중괄호를 사용하면 JSX 안에서 자바스크립트를 위한 창을 열 수 있어요. 이 페이지에서는 - 따옴표로 문자열을 어떻게 전달하는지 - 중괄호를 사용하여 JSX 안에서 자바스크립트 변수를 어떻게 참조하는지 - 중괄호를 사용하여 JSX 안에서 자바스크립트 함수를 어떻게 호출하는지 - 중괄호를 사용하여 JSX 안에서 자바스크립트 객체를 어떻게 사용하는지 를 알아볼 거예요. Passing strings with quotes | 따옴표로..