JSX는 자바스크립트의 확장 문법이다.React에서 UI를 빌드하기 위해 사용한다.JSX는 HTML과 매우 유사하지만, 자바스크립트의 기능을 모두 활용할 수 있다.부모 요소는 하나만 감싸는 형태여야 한다.자바스크립트 표현식컴포넌트가 화면에 렌더링될 때 호출되는 메소드이
Props(Properties) : 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터부모 컴포넌트로부터 받는 데이터이므로 자식 컴포넌트에서는 변경할 수 없음 (= 한 컴포넌트의 속성(Properties)과 같음)부모 컴포넌트(App)에서 자식 컴포넌트(Text)에 속성
배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 새로운 배열로 반환하는 메서드react에서는 map을 사용하여 컴포넌트를 만들 수 있다. 다음과 같은 코드는 배열의 각 요소를 li 태그로 감싸는 컴포넌트를 만든다.map을 사용하면 배열의 길이나 내용이 변경되
기능적 구성 요소에서 상태를 관리할 수 있게 해주는 React hooksstate는 시간이 지남에 따라 변경되고 구성 요소의 출력에 영향을 주는 모든 데이터이다.useState를 사용하려면 react 패키지에서 가져와야 한다.예시 코드
React에서는 UI를 작은 독립적인 조각으로 나누고 관리하는데, 여기서 자주 사용하는 개념들을 정리해봤다.Ternary는 조건부 연산자로, 삼항 연산자라고도 불린다. Ternary는 if/else 문과 같은 조건문을 한 줄로 작성할 수 있어 가독성과 유지보수성을 높
여러 input 엘리먼트를 감쌈 <form onSubmit={handleSubmit}>input: 사용자로부터 입력값을 받음 <input type="text" value={name} onChange={handleChangeName} />label: input
스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법Styled Components 는 CSS-in-JS 라이브러리 중에서도 널리 사용되는 라이브러리이다.써보자.기본 문법은 HTML 엘리먼트나 React 컴포넌트 중 어떤
추가적인 CSS 코드 작성없이 단순히 HTML 요소의 class 속성에 설정해주는 것만으로도 스타일링이 가능한 CSS 프레임워크