wwxs 님의 블로그

Rendering(렌더링)작성한 코드를 화면에 출력하는 기능더보기interface IItem { name: string; isPacked: boolean }function Item({name, isPacked}: IItem) { //! if 조건문을 사용한 조건부 렌더링 // if(isPacked){ // return( // {name} 😊 // ) // } else{ // return( // {name} // ) // } //! 삼항 연산자를 사용한 조건부 렌더링 // : 조건 ? 참일 경우 : 거짓일 경우 // return( // // {/* HTML 내에서 JS문법 사용 시: {}내에 작성 */..

Props부모 컴포넌트로 부터 자식 컴포넌트로 데이터를 전달할 때 사용props로 전달된 데이터는 자식 컴포넌트에서 readonly! 처럼 사용 (변경 불가)  props 전달여러 개의 props 전달과 비구조화 할당(구조 분해)객체나 배열에서 해당 묶음 구조를 풀이해서 작성객체나 배열 내부의 요소들을 한 번에 각각의 요소의 변수에 할당 더보기(자식 컴포넌트)function ChildComponent(props: { name: string }) { // props.name = '이도경'; - Error (readonly 속성) return ( 안녕하세요. {props.name} )}(타입 선언)type MultiPropsType = { name: string; colorProps: stri..

JSXJS(TS) 파일 내에서 HTML과 유사한 마크업을 작성할 수 있도록 해주는 JS 구문 확장 문법사용 목적선언적 뷰 설계 가능 (UI를 직관적으로 설계)불필요한 DOM 설정 필요 X특징JS + HTML (XML) 형태로 엄격한 문법 체계JSX 내에서 Babel을 사용해 JS로 변환하려면 XML 문법을 준수 JSX 문법 규칙1) 단일 루트 노드하나의 컴포넌트는 단일 루트 노드만 반환최상단의 루트 태그가 존재해야 함주로 빈 fragment로 감싸서 표현2) 태그 닫기태그는 반드시 닫혀야 하며 단일 태그 사용 시 닫히는 꺽쇠괄호에 /가 첨부 되있어야 한다ex) input, br, hr, img 등3) 대소문자 구분태그 내의 이름이 대소문자를 구분소문자로 시작: HTML 요소로 인식대문자로 시작: 사용자..

컴포넌트(Component)사용자 인터페이스(UI)를 구축하는 기본 요소컴포넌트 사용 방법1) 컴포넌트 내보내기(export default) 2) 컴포넌트 가져오기불러오는 환경에서 상대 경로를 지정기존의 컴포넌트 함수명에서 변경 가능 (default) 특징파일명이 대문자로 시작 (UpperCamelCase 사용)JS의 일반 함수 형태와 구분rfc, rfce 스니펫 아용시 → 파일명이 함수명으로 구현각 폴더의 메인이 되는 파일: index.tsx(소문자) → 컴포넌트명은 대문자로 수정 컴포넌트 생성HTML 코드 내에서 JS 문법 사용 시: 중괄호 내에 작성JS 코드 내에서 HTML 코드 작성 시 : 소괄호 내에 작성더보기(예제 코드)export function Img() { return( ..

React사용자 인터페이스(User Interfacem, UI)를 구축하기 위한 자바스크립트 '라이브러리' React 특징1) 선언적 뷰명시적 직관적으로 UI의 상태를 기술, 해당 상태에 따라 자동으로 업데이트페이지의 상태가 변할 때 마다 REact가 자동으로 화면을 최신 상태로 갱신2) 컴포넌트 기반UI를 독립적으로 재사용 가능한 여러 컴포넌트로 분리하여 사용각각의 컴포넌트가 자신의 상태를 관리대규모 어플리케이션 개발과 유지 관리에 효율3) Virtual DOM (가상 돔)실제 DOM 보다 빠르게 작동하는 가상돔을 사용, 성능을 최적화JSXJS와 HTML을 결합한 JSX 문법을 사용하여 구성요소의 구조를 쉽게 작성 프레임워크와 라이브러리에 차이 - 프레임워크전체적인 시스템프레임워크가 개발자를 제어한다일..