Dev-dotoli TIL

inno 19



Sparta coding



Innovation Camp


w3 day19



복기: compo : 첫uppercase
folder : 전체 lowercase

semicolon 미사용 - 근거 ref

VSCode : Shft + Alt + click = 여러줄

create-react-app 사용시 console.log 2번씩

  • strictMode issue / 진욱님: 없애도 됨

react manager 정주혜님

  • styled component 질문 / 해결
  • 통째로 넘길 때 key를 풀지말고 …rest로 뭉쳐서 한번에 넘긴다

manifest.json 파일은?

  • pwa : app처럼 쓸 수 있게하는
  • 또는모킹?을 할 때 필요한 파일
  • 실무에서 쓰이나?
  • 성능이나용량에 큰 영향ㄴ 남겨두는편
  • 놔두는 걸 추천

App.js에 compo를 arrow대신 function 이유?

  • react에서 compo를 만들때는 차이없음
  • 대신 App compo도 arrow로 통일
  • this binding? 사용시 arrow, function이 다름
  • 가독성이 떨어져서 function을 쓰는경우 있음
  • export할때 default 안되는경우가 있는데 function은 export default function~한번에 가능
  • default는 한page에서 한번만 그래서 page를 구성하는 compo는 default로 export함

index.js에서 App감쌀 때 브라우저 router / 프로바이더

  • 브라우저 router는 가장 바깥에 있어야 함
  • 프로바이더는 compo 밖에만 있으면 됨
  • 프로바이더 = compo의 상태를 공급 그래서 compo 밖에서 감싸주는 형태가 보기 좋음

reportWebVital 지워도?

  • program 성능 확인용. 놔둬라
  • test file은 ㄴ 상관

test code 할 때 쓰는 것들 취업 전/후?

  • 신입은 잘 몰라도 될 것 같다
  • backend한테는 중요해
  • 뭐 알아서 나쁠건 없긴 해

id값을 Date.now로 줬다(밀리세컨-중복x)

  • 같은 값을 안바뀌고 계속 가지고 가는 것 같다
  • onClick 할 때 id를 생성하는걸로 바꿀?
  • 동시에 누르면 어떻게? > 그럴 수 없을 듯

redux , 컨텍스트 차이?

  • main역할은 같다
  • compo에 전역으로 state를 넣음
  • 컨텍스트 api는 관리하기 힘듦, 지저분함
  • 둘다 쓰긴 함
  • 컨텍스트를 기반으로 만들어진듯(지현님)

탑다운? : 위에서부터 아래로 보는 시선

진행하다가 모르는게 있을때 강의/구글
과제노션 8/19 21:00

아직 배우는 단계
주특기 2주차일뿐
불안 ㄴㄴ
코드공유 / feedback 받기
현업개발자처럼 코드짜기 - 노필요
자기만의 코드를 짜고 짠 이유를 말할기회

8/21 WIL 제출
8/25 주특기 개인/팀과제 제출

team repo Q1
notion shorter link
done

Q1
done in Notion

LifeCoding 5 Props

App > Header

Header에 parameter로 props

  • return하는 Html에 원하는 값 { }

Q1 compo의 부모자식 구분x

  • 부모로부터 자식이 받아오잖아?

  • 그럼 App에 있는 값을 Header가 받음

    inno 16 맞음
- App이라는 부모compo가
  자식compo들을 받아서 구성중인 듯
- 자식compo가 각자 생김새를 정의하고(function)
  마지막에 부모가 전체적 view를 잡아주는?

- 부모compo에 큰 틀을 짜고 있고 그 틀안에
  넘겨야할 정보들도 다 가지고 있는 상태
- 자식compo는 그 정보를 받고 정보를 바탕으로
  자신의 형태+내포하는정보를 보여줄 모습을 return함

부모compo=큰틀view + 세세한data
자식compo=자신의view + 실행할code
실행했을 때 보여지는 data는 props로 받음
  • 자식compo의 function parameter로 props넣고

  • 자식compo에 부모compo로 부터 받을부분을 { props.인자 }로 지정

    • { }안의 내용은 string이 아니라 표현식이므로 해석해서 반영해줌

      function Header(props) {
  console.log(props);
  return (
    <header>
      <h1> {props.title} </h1>
    </header>
  );
}

function App() {
  return (
    <div>
      <Header title="React"></Header>
      <Nav></Nav>
      <Article title="Welcome" body="Hello, React"></Article>
    </div>
  );
}

미쳤다 이해 쏙쏙됨

단순한 문자열이 아니라 list를 전달할 땐?

  • 전달 할 정보를 배열로 구성
  • App에서 props로 전달할 때 { }를 사용

  • console찍어보기

  • 변수 lis를 배열로 설정하고 []
  • for문으로 index를 가져오고
  • for문 안에 변수t = props.topics[i]
  • 받은 t에 t.title 을 list형태로
  • 변수 lis에 push
  • <a>tag를 씌워서 링크로 변경
  • <a>tag 안에 href=adress 넣기
  • adress로 동적으로 작동, 때문에 { }사용

warning : Each child in a list should have a unique “key” prop.

- <li>에 key prop을 줘라, 그리고 그 값은
  반복문 안에서 unique해야함

- <li key={t.id}>

- 자동으로 생성한 tag는
  react가 추적 할 수 있어야 하고
  추적할 때 근거가 있어야함
  그 근거로써 key라고 하는 약속된prop을 부여
  그럼으로써 react는 성능up, 정확하게 동작

LifeCoding 6 Event

header를 클릭했을때 event를 일으키고싶다

  • 부모App의 header에 onChangeMode라는
    함수를 넣고

    • 이 함수에는 발생시킬event인
      alert(‘header’); 가 포함되어있음
  • header compo안
    <a>tag에 onClick={}을 사용
    onClick을 했을 때 function을 실행

  • 이떄 function의 parameter로 event 객체를넣기
    page가 reload하기않기위해
    event.perventDefault();

    React에서는 false를 반환해도 기본 동작을
방지할 수 없음 반드시 preventDefault를
명시적으로 호출해야 함
  • function > arrow 함수로 바꾸면 보기좋음

Nav list를 onClick했을 때 id값을 alert하고싶음

  • 그대로 쭉 진행
  • 자식compo onChangeMode함수에 id값을
    받아오는 방법은 다양하지만
  • <a>태그안에 id={t.id} 삽입
  • 그리고 event객체의
  • event를 발생시키는 target

  • 그리고 id값

    function Nav(props) {
  console.log(props);
  const lis = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(
      <li key={t.id}>
        <a
          id={t.id}
          href={"/read/" + t.id}
          onClick={function (event) {
            event.preventDefault();
            props.onChangeMode(event.target.id);
          }}
        >
          {t.title}
        </a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );
}

function App() {
  const topics = [
    { id: 1, title: "html", body: "html is..." },
    { id: 2, title: "css", body: "css is..." },
    { id: 3, title: "js", body: "js is..." },
  ];
  return (
    <div>
      <Header
        title="WEB"
        onChangeMode={function () {
          alert("Header");
        }}
      ></Header>
      <Nav
        topics={topics}
        onChangeMode={function (id) {
          alert(id);
        }}
      ></Nav>
      <Article title="Welcome" body="Hello, React"></Article>
    </div>
  );
}

LifeCoding 7 State

prop / state가 변경되면 새로운 return값으로 변경되고 UI를 바꿈

  • prop : compo를 사용하는 외부자를 위한 data
  • state : compo를 만드는 내부자를 위한 data

Application의 논리를 구성해보자

  • const mode 를 App안에 선언하고
  • let content 선언 / 초기값 설정
    • if mode가 WELCOME 일 때 <Article~ welcome>을 return
    • if mode가 READ일 때 <Article~ read>를 return
  • Article이 들어갈 위치에 변수{content} 삽입