react - const, let 쓰기가 무서울때

function 으로 시작하는 것이 유일한 것이므로, const 쓰면 뱉어대는 에러 메세지는 곧 무능과도 같다(...)

 

하지만 절망감에 빠져있기 보다는, const 를 어떻게 적용 해서 props.children 까지 자유로이 합성 가능한지 알아보자.

 

import React from 'react';

function Home() {
  return (
    <div>
      <h1>Hello!</h1>
    </div>
  );
}

export default Home;

이 위의 코드를 const 로 바꿔 볼 생각이다.

https://stackoverflow.com/questions/40825010/const-or-let-in-react-component

const or let in React component

const is a signal that the variable won’t be reassigned.

let is a signal that the variable may be reassigned

Additional things to ponder:

• Use const by default
• Use let only if rebinding is needed
• const does not indicate that a value is ‘constant’ or immutable.Only the binding is immutable. ie using an assignment operator or a unary or postfix -- or ++ operator on a const variable throws a TypeError exception
• const foo = {}; foo.bar = 10; console.log(foo.bar); // --> 10
• ES6 const and let are hoisted too. Although the identifiers has the same memory reference from compile time, they cannot be accessed before declaration in the code. (but not as we thought the declaration would be physically moved to the top in the scope) ;)

자, 그럼 definition 은 이정도로 보고 const 를 적용해보겠다.

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

https://corini.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8React-%ED%95%99%EC%8A%B5%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EA%B8%B0%EC%B4%88%EC%A7%80%EC%8B%9D-%EB%B3%80%EC%88%98var-let-const

[리액트(React) 학습자를 위한 기초지식] var, let, const 차이점 - #1 재선언, 재할당

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

function 이 큰 지시도라면, 각 종 변수들은 지시도에 남겨놓는 '상세 지시 내용' 이라 보는 것이다.

 

헷깔리는가? 그렇다면 아래를 보자.

보다시피, 꼭 function Navbar 로 시작 안해도, const Navbar 로도 에러 없이 작동이 가능하다. 만약 계속 꼬인다면, 반드시 자신이 이해 가능한 로직으로 코드를 에러나기 전 시점 에서 다시 구성해보기 바란다. 주변에 조언자가 없이 스스로 해내야 한다면, 이것만큼 귀찮고 우울해지지만 확실한 해결 방법도 없다. 

 

다만 아래에 components <> </> 가 눈에 띄는게 특징인데, 이는 기타 태그를 사용해서로 보여짐 (예: <Nav>)

import React from "react";

const Navbar = () => {
    return (
        <>
           <Nav>
            <NavLogo to="/">
                Logo
            </NavLogo>
            <Bars />

            <NavMenu>
                <NavLink to="/" activeStyle>
                    Home
                </NavLink>
                <NavLink to="/about" activeStyle>
                    About
                </NavLink>
                <NavLink to="/contact" activeStyle>
                    Contact
                </NavLink>
                <NavLink to="/signin" activeStyle>
                    Sign In
                </NavLink>
                <NavBtn>
                    <NavBtnLink to="/sign-up">Sign Up</NavBtnLink>                
                </NavBtn>
            </NavMenu> 
           </Nav> 
        </>
    );
};
export default Navbar;

 

조언:

유튜버는 분명 도움 되지만, 절때 전지전능한 수준으로 자신의 상황에 맞는 정확한 답을 알려주는 사람이 아니다!

이들은 그냥 아이디어 얻는 용도로 활용하고, 문서에 의존하면서 찾아가는게 가장 정신건강에 좋아 보인다.