4전 4전

리액트에서 map(), filter()를 사용하여 배열의 있는 데이터들 모두 렌더링 하거나 특정 조건에 맞는 데이터만 렌더링 할 수 있습니다. | map() map() 함수를 사용하여 배열의 모든 데이터들을 한 번에 렌더링 할 수 있습니다. 아래와 같은 데이터가 있다고 하면 const items = [ { id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'orange' }, ]; 위 배열을 사용하여 리스트 형식으로 렌더링 하고 싶으면 { itmes.map((v, i) => { return {item.name} }) } 이런 식으로 사용하면 배열을 돌면서 각 데이터들의 정보를 렌더링 해줍니다. | filter() filter()를 사용하..

리액트에서 컴포넌트를 만들고 다른 곳에서 사용하려면 컴포넌트를 export 하고 사용하려고 하는 파일에서 컴포넌트를 import 해야 됩니다. | Default 컴포넌트를 export 하는 방법에 default로 하는 방법이 있는데 이는 하나의 파일에서 하나의 컴포넌트를 보내고 싶을 때 사용하면 됩니다. 1. export export default 키워드를 사용하면 됩니다. export default function MyComponent() { return Hello, World!; } OR function MyComponent() { return Hello, World!; } export default MyComponent; 2. import import를 하려면 import키워드를 사용해 다른 파일에..

| 조선부 렌더링 리액트에서는 특정 조건에 따라서 JSX요소를 렌더링 할 수 있습니다. 1. if 문 사용 function 컴포넌트(props) { if (props.isTrue) { return 조건이 참이면 렌더링; } else { return 조건이 거짓이면 랜더링; } } props.isTrue의 값에 따라 JSX요소를 렌더링 해줍니다. 2. 조건부 연산자 사용 function 컴포넌트(props) { return ( {props.isTrue ? ( 조건이 참이면 렌더링 ) : ( 조건이 거짓이면 렌더링. )} ); } props.isTrue의 값에 따라 삼항 연산자를 사용하여 JSX요소를 렌더링 해줍니다. 3. && 연산자 사용 function 컴포넌트(props) { return ( {prop..

| 이벤트 처리 1. 기본 형태 그냥 HTML에서는 소문자를 이용하여 이벤트 처리를 하는데 클릭 리액트에서는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. 클릭 2. 기본 동작 방지 리액트에서는 폼 제출 같은 기본 동작을 방지하려면 반드시 preventDefault를 명시적으로 호출해야 합니다. function Form() { return ( { e.preventDefault(); }}> 제출 ); }

리액트에서 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눌 수 있습니다. 자바스크립트 함수와 유사하고, props라는 입력을 받은 후 화면에 표시를 해줍니다. | Components, Props 1. 컴포넌트 만들기 함수 컴포넌트 function Sayhi(props) { return 안녕하세요, 저는 {props.name} 입니다.; } 클래스 컴포넌트 class Sayhi extends React.Component { render() { return 안녕하세요, 저는 {this.props.name} 입니다.; } } 이런 식으로 컴포넌트를 만들 수 있습니다. 2. 컴포넌트 렌더링 리액트 엘리먼트에 사용자 지정 컴포넌트를 사용할 수 있습니다. const element = ; 렌더링 하..

| ~ 연산자 자바스크립트에서 "~" 연산자는 비트반전 연산자입니다. 피연산자의 모든 비트를 반전시키고, 그 결과를 반환해 줍니다. 예를 들어 5라는 숫자가 있다고 해봅시다. 5를 32비트 이진수로 나타내면 '00000000000000000000000000000101'인데 ~5라고 사용하면 각 비트를 반전시켜서 '11111111111111111111111111111010'이 됩니다. 이를 10진수로 변환하면 -6이 되는 거입니다. console.log(~5) // -6출력 | ~~ 연산자 "~~" 연산자는 "~" 연산자를 두 번 적용하는 연산자입니다. ~5는 -6이 되는 거고 ~~5는 다시 5가 되는 거입니다. 근데 "~" 연산자를 사용하면 소수점이 날아가기 때문에 피연산자의 소수 부분을 제거하고 정수 ..

| 엘리먼트 렌더링 하기 1. 엘리먼트 리액트에서 엘리먼트는 리액트 앱의 가장 작은 단위라고 합니다. const element = hello, world; 엘리먼트는 화면에 표시할 내용을 기술합니다. 2. 렌더링 하기 HTML파일에 이런 div요소가 있다고 하면 이 요소를 ReactDOM.crearteRoot()에 전달하여 root 엘리먼트를 만들어주고 화면에 표시하고 싶은 리액트 엘리먼트를 root.render()에 전달하면 됩니다. const root = ReactDOM.createRoot(document.getElementById("root")); const element = hello, world; root.render(element); 이런 식으로 코드를 실행하면 화면에 hello, world가..

| extends extends는 내가 만든 class를 상속한 또 하나의 class를 만들고 싶을 때 사용할 수 있습니다. // class 생성 class User { constructor(name, age) { this.name = name; this.age = age; } } // class User를 기반으로한 새로운 class User2 생성 class User2 extends User { } let me = new User('Lee', 26); // { name: 'Lee', age: 26 } let me = new User2('Lee', 26); // { name: 'Lee', age: 26 } 이런 식으로 원하는 class를 복사한 또 하나의 class를 만들 수 있습니다. | super ..