Jini Dev

React : 컴포넌트와 Props, State (+ useState 훅) 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본" data-og-host="jini-dev.tistory.com" data-og-source-url="https://jini-dev.tistory.com/75" data-og-url="https://jini-dev.tistory.com/75" data-og-image="https://scrap.kakaocdn.net/dn/E9uEx/hyYPc17D81/63lp2fhJSPPcQ4KsAkiDg1/img.png?width=800&height=420&face=0_0_800_420,https:..

React : 컴포넌트와 Props, State (+ useState 훅) 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본" data-og-host="jini-dev.tistory.com" data-og-source-url="https://jini-dev.tistory.com/75" data-og-url="https://jini-dev.tistory.com/75" data-og-image="https://scrap.kakaocdn.net/dn/E9uEx/hyYPc17D81/63lp2fhJSPPcQ4KsAkiDg1/img.png?width=800&height=420&face=0_0_800_420,https:..

컴포넌트란?- 스스로 상태를 관리하는 캡슐화된 코드 조각=> 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본적으로 함수이기 때문에 자신만의 고유한 로직이 들어갈 수 있다. 함수 형태로 컴포넌트를 만들게 되면 함수 스코프에 의해서 외부와 내부 스코프가 나눠지기 때문에- 스스로 상태(state)를 가질 수 있다.- 컴포넌트는 명확한 범위와 의미를 가질 수 있도록 파일을 분리한다=> 각각 개별의 파일로 나눈다. - 최상위 컴포넌트의 이름은 암묵적으로 App이다.=> 루트 컴포넌트- 최상위 컴포넌트(App)을 렌더링 하는 코드는 index.js에 둔다.=> 엔트리 포인트Props 부모 컴포넌트에서 자식 컴포넌트..

요구사항구구단을 2~9단 출력한다단, 5단은 제외한다홀수 단은 다른 색으로 표시한다.구구단은 오른쪽으로 나열되게 한다.const num = [1, 2, 3, 4, 5, 6, 7, 8, 9]; {/* 여기에 JSX를 활용하여 요구사항에 맞게 구구단을 완성시켜보세요! */} 풀이function list(a) { return ( {num.map((i) => { return {`${a} X ${i} = ${a * i}`}; })} );} {list(2)} {list(3)} {list(4)} {list(6)} {list(7)} {list(8)} {list(9)} 정답 코드 {num.map( (n) =>..

JSX 문법JSX : JavaScript + XMLJS 확장 문법이다. HTML 모양에 가까운데 내부적으로 JavaScript를 사용할 수 있다.React 는 JSX를 이용해서 컴포넌트를 작성한다. 1. 최상위 부모 요소는 1개로 단일해야한다. Hello, world!2. 함수의 실행문이나 값을 작성할 때에는 {} 를 사용한다const name = 'lala' {name} // lala 3. 주석 작성은 {/**/} 으로 한다. (한줄 작성은 없다) {/* 주석입니다. */} {name} 4. 모두 닫힘 태그를 사용한다.5. 태그의 속성 이름이 HTML과 다르다- 클래스 속성은 className으로 표기한다- for 속성은 htmlFor 으로 표기한다- onclick 속성은 ..

React사용자 인터페이스를 만들기 위한 JS 라이브러리웹 개발을 쉽게 할 수 있도록 도와주는 라이브러리 => 사용자 인터페이스를 독립적인 컴포넌트 단위로 만들어 재사용성과 유지보수성을 높여주는 JS 라이브러리 프레임워크 : 개발을 위한 기본 틀, 뼈대라이브러리 : 개발에 필요한 도구 또는 집합 왜 React 인가?1. 굉장히 많이 사용해서 수요가 많고 방대한 생태계이다.2. SPA 개발에 적합하다. (SEO에 좋다)3. 화면을 여러 단위로 쪼개고, 재사용하는 식으로 코드 관리가 유용하다.4. 유용한 라이브러리들이 많다.React 이전 웹 서비스의 동작 방식 (MPA) Multiple Page Application여러 페이지로 구성되어 있고 페이지 이동시에 서버에서 새로운 HTML을 받아오는 형식이다.페..