REACT_기본문법 1. JSX

Eunsu·2021년 10월 20일

@ React

목록 보기

7/11

참조 : https://ko.reactjs.org/docs/hello-world.html [리액트 공식 홈페이지]

과거 계속 붙잡고있었던 리액트의 기본문법을 다시 정리하고자 한다.
그 당시 공부를 했음에도 지금 기억하지 못한 이유는, 그때의 열심히 하지 않았던..것 같다.. JSX가 무엇인지, state,props의 정확한 의미와 역활을 한마디로 정확히 정의를 내리고, 사용이유와 flow를 아는것이 이번 리액트 공부법의 핵심이다.

본 내용은 리액트 공식 홈페이지를 중점으로 참조한다!

JSX란?

JavaScript를 확장한 문법으로, JavaScript의 모든 기능이 포함되어 있다. 또한 JSX는 리액트 엘리먼트를 생성한다. (UI적으로 XML이 가까움.) 하지만 공식적인 자바스크립트 문법은 아니다. 바벨에서 preset 설정을 통해 개발자들이 임의로 만든 문법, 차기 자바스크립트의 문법들을 사용할 수 있다.

출처 : https://developerntraveler.tistory.com/54 []

그러면 이걸 왜써야 함??

리액트는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리함. 리액트에서 대부분의 사람들이 JS코드안에서 UI 관련작업을 할 때 시각적으로 더 도움이 된다고 생각하기때문에 JSX를 사용함!

JSX 문법

꼭 닫힌태그 필요
Fragment, div, <> 등을 감싸고 있어야 함.

그 이유는 가상돔에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져 있어야 한다는 규칙 때문이당!

JSX는 객체를 나타냄

  const element = ( 
      <h1 className="greeting"> 
          Hello, world! 
      </h1> 
  );

기본 JSX문법 마크업

  const element = React.createElement( 
      'h1', 
      {className: 'greeting'}, 
      'Hello, world!' 
  );

바벨을 돌리기 전 순수 리액트 엘리먼트

  const element = { 
      type: 'h1', 
      props: { 
          className: 'greeting', 
          children: 'Hello, world!' 
      } 
  };

리액트 내 에서 인식되기 전 코드

JSX 또한 표현식이다.

컴파일이 끝나면, JSX 표현식이 정규 자바스크립트 함수 호출이 되고 자바스크립트 객체로 인식된다. if, for 문에서 JSX를 사용할 수 있으며, 변수를 할당하거나 매개변수로 전달하거나 함수에서 반환할 수 있음.

function formatName(name){
	return <p> Mr.{name}</p>
}

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}
  
  getFreeting("John")

JSX에 표현식(자바스크립트) 포함하기

const users= {
	user1:'John',
  	user2:'Bob'
}
const element= () => {
	return <h1> Welcome {users.user1} ! </h1>
}

ReactDom.render(element,document.getElementById('root'))

JSX 연산자

조건부 연산자

JSX내부의 자바스크립트 표현식에서 if문을 사용할 수는 없지만, 조건에 따라 다른내용을 랜더링 할 때에는 JSX 밖에서 if문을 사용하여 사전값을 설정하거나, 블록안에 삼항 연산자를 사용하면 된다.

const Test = () => {
  const user = {
    name: "john",
    age: 24,
  };
  return (
    <div>{user.name !== "" ? <h1>Have name</h1> : <h1> No name </h1>}</div>
  );
};

*** 내생각.
props전달을 할때 어떤 조건이 필요하거나, 무언가를 처리할때는 되는것 같은데 props를 전달받을때는 블록안에서 뭔가가 처리가 안되는 것 같다. 사실 이부분은 test를 많이해봐야해서 나중에 고칠꺼임. 근데 내 생각은 요럼.

And 연산자를 사용한 조건부 렌더링

아무것도 렌더링 하고 싶지 않을 때, 아예 아무것도 렌더링 하지 않아야 할 상황이 올수도 있다. and연산자를 사용하면 짧은 코드로 작업 할 수 있다.

const Test = () => {
  const user = {
    name: "john",
    age: 24,
  };
  return <div>{user.name === "john" && <h1>Hi {user.name}</h1>}</div>;
};

user.name = 'john' 이므로 첫번째 조건항을 true 이므로 Hi {user.name}을 출력한다.

만약 user.name = ''이라면 false가 성립되므로 이 조건항은 false가 되므로 아무것도 출력하지 않는다.

props와 조건부연산항

내가 실험하려고 했던것 => 자식 component가 갖고있는 data를 App.js로 가져오기.

가져오는건 가능하나 가공을 못함. 관리를 못함. 모든 데이터는 부모 컴포넌트에서 관리해야함.

*App.js

import Test from "./components/Test";
function App() {
  const testFunc = (data) => {
    console.log(data);
  };

  return (
    <div className="App">
      <Test func={testFunc}></Test>
    </div>
  );
}
export default App;

*test.js

const Test = ({ func }) => {
  const user = {
    name: "john",
    age: 24,
  };
  func(user);
  return <div>{user.name === "john" && <h1>Hi {user.name}</h1>}</div>;
};

export default Test;