4전 4전

| 조선부 렌더링 리액트에서는 특정 조건에 따라서 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 ..

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 를 입력해 주면 리액트 앱이 실행됩니다.