22.03.08 화

오늘은 리액트를 집중적으로 공부해보았습니다.

리액트를 공부하면서 JS의 문법도 같이 익혀서 많이 도움이 된 것 같습니다. 

 

 1. 화살표 함수

// 함수가 있는 경우
const clcikBotton = () => {
    function onClickEvent(event) {
        event.preventDefault();
    }
    return (
    <form onSubmit={onClickEvent}>
        <button type="submit">제출</button>
    </form>
    );
}

// 함수가 없는 경우
const clcikBotton = () => (
    <form>
        <button type="submit">제출</button>
    </form>
    )
    
// {}와 return의 유무를 확인할 수 있다.

 

 

2. 구조분해할당

정의: 객체나 배열을 변수로 '분해’할 수 있게 해주는 문법

필요성:  함수에 객체나 배열을 전달해야 하는 경우, 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생겨 생겨났다.

예제

// 이름과 성을 요소로 가진 배열
let arr = ["Bora", "Lee"]

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let firstName = arr[0];
let surname = arr[1];

let [firstName, surname] = arr;

alert(firstName); // Bora
alert(surname);  // Lee

 

이것을 통해 리액트에서 사용하는 const [counter, setCounter] = React.useState(1);를 살펴보겠습니다.

// 구조분해할당
const [counter, setCounter] = React.useState(1);
// const counterState = React.useState(1);
// const counter = counterState[0];
// const setCounter = counterState[1];

이렇게 이해할 수 있습니다.

 

참고문헌

https://ko.javascript.info/destructuring-assignment

구조 분해 할당

 

 

3. children과 속성 (plus. inline style로 css사용)

// children 사용
const Title = (props) => {
        console.log(props); // {children: "1번째 고양이 가라사대"}
        return <h1>{props.children}</h1>;
      };
      
// props의 img 사용
 // 추가로 inline style로 css사용할 때 변수에 객체 형태로 넣어 중괄호 2번 해준다
function CatItem(props) {
        return (
          <li>
            <img src={props.img} style={{ width: "150px" }} />
          </li>
        );
      };
      
function Favorites(props) {
        return (
          <ul className="favorites">
            <CatItem img="https://cataas.com//cat/5e9970351b7a400011744233/says/inflearn" />
            <CatItem img="https://cataas.com/cat/595f280b557291a9750ebf65/says/JavaScript" />
          </ul>
        );
      }

 

 

4.구조 분해 문법(Destructuring)

 // const MainCard = (props) => {}를 활용해 <img src={props.img}/> 로 나타낼 수 있으나
 // ES6 문법(디스트럭처링 문법)을 활용해 const Main = ({img}) => {}로 <img src={{img}}/>로 나타낼 수 있다

      const MainCard = ({ img }) => {
        function handleHeartClick() {
          console.log("하트 눌렀음");
        }
        function handleHeartMouseOver() {
          console.log("하트 스쳐 지나감");
        }
        return (
          <div className="main-card">
            <img src={img} alt="고양이" width="400" />
            <button
              onClick={handleHeartClick}
              onMouseOver={handleHeartMouseOver}
            >
              🤍
            </button>
          </div>
        );
      };

 

참고문헌

Destructuring | PoiemaWeb

Destructuring | Cracking Vue.js

 

 

5. 이외 리액트 간단한 정리

1. 컴포넌트에서는 최상위 태그가 1개여야 한다.

const app = (
    <div>
      <h2>hi</h2>
    </div>
    );
 
 // 또는
 
 function CatItem(props) {
        return (
          <li>
            <img src={props.img} style={{ width: "150px" }} />
          </li>
        );
      }

 

2. React에서 class는 className이다.

3. 컴포넌트는 언제나 첫글자를 대문자로 짓으며 카멜케이스를 따른다.

4. 컴포넌트를 만들고 app에 넣을 때 태그 형태로 넣는다.

const app = (
        <div>
          <Title> 1번째 고양이 가라사사대 </Title>
          <Form />
          <MainCard img="https://cataas.com/cat/60b73094e04e18001194a309/says/react" />
          <Favorites />
        </div>
      );