[포스코x코딩온] React 프로젝트 생성 및 JSX 사용하기

이제 React 프로젝트를 생성해보자

npx create-react-app 앱이름

• 앱 이름에는 대문자 사용 불가 
• 대문자 대신 대시(-) 사용하기
• npx란?
  • npm의 자식 명령어로 npm보다 가볍게 패키지를 구성한다.
  • npm 버전이 5.2 이상일 때, node 버전이 14 이상일 때 사용 가능

설치 성공 메시지

React 시작

cd 앱이름
npm start

localhost:3000으로 서버가 열린다.

---

JSX 사용하기

• 최상위 요소는 형제가 없는 고유한 요소! 반드시 부모 요소 하나가 감싸는 형태를 가져야 한다.

• 최상위 태그에 태그명을 넣고 싶지 않을 때는 빈 태그(fragment)를 넣을 수 있다.

function App() {
	return(
		<>
        	<h1>Hello World</h1>
            <div>리액트 시작</div>
        </>
    );
}

• 종료태그는 필수
  • 기존의 종료가 태그가 없는 태그를 사용하더라도 종료 태그를 작성 or Self-closing

<input></input>

/////////////////

<input />

• Style을 이용할 때는 camelCase를 이용
  •  backgroundColor
  • fontSize
  • className
  • onClick
• JSX안에서 JavaScript 사용이 가능하다
• JSX안에서 JavaScript문법을 사용할 때는 { }로 감싸서 사용해야 한다.

function App() {
	const name = "강동호";
    return(
    	<>
        	<div>{name}안녕?</div>
            <div>반가워!</div>
        </>
    );
}

• 연산자를 사용할 때는 아래의 방법을 이용해야 한다.
  • 계산을 다 한 후, 변수에 담아서 JSX 문법에서 보여주기
  • { } 안에서 삼항 연산자 이용하기

{/*계산 후 변수에 담아서 JSX 문법에 보여줌 */}
fuction App(){
	let flag = true;
    let txt = "";
    
    if(flag) txt = "True 입니다.";
    else txt = "False 입니다.";
    
    return(
		<div>{txt}</div>
    );
}


{/* { } 안에서 삼항 연산자 이용 */}
function App() {
	let flag = true;
    return(
    	<div>
        { flag ? (<h1> True입니다.</h1>):(<h1>False입니다.</h1>)}
        </div>
    );
}

• 요소에 스타일을 적용할 때는 문자열이 아닌, 객체 형태로 사용

function App() {
  const style = {
    backgroundColor: "red",
  };
  return (
  <>
  <div style={style}>리액트 시작</div>
  </>
  );
}

• 주석의 사용
  •  JSX안에서 주석을 사용할 때는 {/* */} 형태로 사용

---

map()

• 배열의 각 요소에 대해 작업을 수행하고 그 결과를 가지고 새로운 배열을 생성할 대 사용하는 자바스크립트 배열 메소드 
• map()의 인자로 넘겨지는 callback함수를 실행한 결과를 가지고 새로운 배열을 만들 때 사용
• map() 함수를 필요에 따라 반복문처럼 사용할 수도 있음

변수명.map( callbackFuction, [thisArg])

• callbackFunction
  • 새로운 배열의 요소를 생성하는 함수로, currentValue, index, array 3개의 인수를 가질 수 있다.
• [this.Arg]는 생략 가능한 것으로 callbackFunction에서 사용할 this 객체

function App() {
  let list = ["a", "b", "c", "d", "e"];
  let items = list.map((txt, id, arr) => {
    console.log("txt: ", txt);
    console.log("id: ", id);
    console.log("arr: ", arr);
    return txt + id;
  });
  return (
    <>
      <h1>{items}</h1>
    </>
  );
}

export default App;

• txt: list를 순서대로 돌면서 나오는 값
• id: 방금 나온 값(txt)의 인덱스
• arr: 현재 반복을 돌고 있는 배열
• items: "return txt + id; " 로 만들어진 배열

---

Componet에 map( ) 적용

function App() {
  const list = ["T", "S", "t", "o", "r", "y"];
  return (
    <>
      <ol>
        {list.map((value, idx) => {
          return <li key={idx}>{value}</li>;
        })}
      </ol>
    </>
  );
}

export default App;

• map() 함수를 이용해 컴포넌트를 생성할 때 "key" 사용을 권장
• React는 자율적으로 업데이트 전 기존 요소와 업데이트 요소를 비교하는데 Key를 사용한다.
• Key를 index 값으로 설정할 시, 리스트의 순서가 변경되면 모든 key가 변경되므로 key는 index가 아닌 고유한 값으로 설정해야 한다.
• 각 원소마다 고유 id값을 가지고 있다면 다음과 같이 설정할 수 있다.

---

Filter( ) 함수

• 배열의 각 요소에 대해 주어진 함수를 호출하여 조건을 만족하는 요소들로 구성된 새로운 배열을 반환하는 자바스크립트 배열 메소드
• filter()의 인자로 넘겨지는 callback 함수의 테스트(조건)를 통과하는 요소를 모아 새로운 배열을 생성
• filter() 함수를 사용하여 배열에서 원하는 값을 삭제하는 코드 구현 가능
• 조건에 맞는 요소들로 이루어진 새로운 배열을 반환하므로, 조건에 따라 원하는 데이터를 추출하거나 필터링할 때 유용하게 사용 가능

let animals = ['dog','cat','rabbit'];

let newAnimals = animals.filter((animal)=>{ return animal.length > 3});

{/* */}

let words = ['dog','cat','rabbit'];

let result2 = words.filter((word) => {
	return word.includes('a');
});

---

단축평가

• 논리 연산자를 사용하여 특정 조건에 따라 값을 결정하거나, 조건에 따라 특정 코드를 실행하는 방법
• && 연산자를 사용한 단축 평가
  • 둘 다 참
• | | 연산자를 사용한 단축 평가
  • 둘 중 하나 참

&& 연산자

• A && B
  • A가 false : B는 아예 확인하지 않고 바로 A의 값을 반환합니다. A가 이미 false이므로 A와 B 모두 참일 수 없기 때문
  • A가 true : 만약 A가 true라면, B의 값을 확인.

const result = false && "Hello";
console.log(result); //출력: false

//=====================//

const name = "dongho";
const greeting = name && `Hello, ${name}!`;
console.log(greeting); //출력: "Hello, dongho!"

|| 연산자

• A || B
  • A가 false: B의 값을 확인
  • A가 true: B는 아예 확인하지 않고 바로 A의 값을 반환
  •  

const defaultName = "dongho";
const userName = null;
const displayName = userName || defaultName;
console.log(displayName); //출력: "dongho"

//===================//

const result = true || "hello";
console.log(result); //출력: true