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 = ; 렌더링 하..

| 엘리먼트 렌더링 하기 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가..

const element = Hello, world; 위 코드와 같은 문법은 문자열도 아니고 HTML도 아닌 JSX문법이라고 합니다. JSX는 JavaScript XML로 JavaScript에 XML을 확장한 문법입니다. 리액트에서 UI를 나타내기 위해서 사용이 됩니다. | JSX사용 1. JSX에 변수 넣기 변수를 넣으려면 변수를 중괄호로 감싼 다음 JSX안에서 사용하면 됩니다. const name = "LEE"; const element = Hello, {name}; 2. 태그 속성 따옴표를 이용해 문자열 값을 넣을 수 있습니다. const element = 링크; 중괄호를 사용해 자바스크립트 표현식을 넣을 수 있습니다. const element = ; 3. class 지정 일반 HTML과 다르게 c..

| 리액트 프로젝트 생성 1. npm 설치 확인 리액트 프로젝트를 생성하려면 먼저 npm이 설치되어 있어야 하기 때문에 먼저 npm -v 명령어를 사용해서 설치여부와 버전을 확인해줘야 합니다. 2. 프로젝트 폴더 만들기 터미널에 npx create-react-app을 치고 프로젝트 폴더 명을 치면 리액트 프로젝트가 생성이 됩니다. 3. 프로젝트 열기 먼저 생성한 리액트 폴더로 이동해 줍니다. 그리고 터미널에 npm start 를 입력해 주면 리액트 앱이 실행됩니다.