react 공부한것 기록

오늘배운것중 기억해야할것

- "반드시 주의해야할점"

만든 프로젝트를 열어줘야 합니다!
상하위 폴더를 열어서 그러면 안되고 Src폴더만 있으면 안됩니다.
react 파일에 node module src publc 구조 항상있어야함! 

- root.render 
랜더= 화면에 그림

- 상대경로 -> 절대경로로 바꿔주는방법 : 

jsconfig.json 파일에 아래코드 작성

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": [
        "src"
    ]
}

cf) ./ 이런게 상대경로 입니다. 

- 화면에 보여지게 하다"를 줄여서 Rendering 
- 컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자
- 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓습니다.
- js에 스타일 넣을때 중괄호 하나하고 객체를 넣어주는게 좀 더 정확한 의미 (스타일 작성시)

- //혹은 스타일 객체를 변수로 만들고 쓸 수 있습니다.

function App() {
  const styles = {
    color: 'red',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

export default App;

----------------------VS---------------

function App() {


  return (
    <div className="App">
      <p style={{ color: 'blue', fontSize: '50px' }}>orange</p>
    </div>
  );
}

export default App; 
/// 방식 2개가능합니다.

- 값을 가져올 때 뿐만 아니라, map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용할 수 있습니다.
- 변수로 뻄으로서 재사용가능 
- 계속 내리다보면 props drilling 이라는  현상이 일어남 -> 이런현상이 무엇인지 (면접 단골 질문) 
- 여는 태그 닫는 태그 사이에 어떤값을두면 리액트는 자동적으로 children 이라는 props를 가지고 있음 
- 동일한 컴포넌트 쓰게되면 칠드런이 쓰일수 있음 (칠드런도 똑같음= 부모->자식) 
- <React.StrictMode> 해제 하면 2번출력한거 1번출력으로 보임
- props 추출 명시해서 이름써놓는게 더좋음 props라고 서놓는것보다 
- 컴포넌트 파일= jsx로 쓰는게 편함 
- default값 설정가능 (값이 없을시 만약을 대비해서)
- onChange 속성에서는 항상 event가 중요, onchange에는 항상 event가 딸려옴 
- input type = text, password 다름 
- input value , onChange 항상 쌍으로 묶기 
- 불변성 : 메모리에 있는 값을 변경할 수 없는 것.
- 원시데이터 -> 값바꾸는게 아니라 새로운 메모리 저장 공간을만듬 
- 객체같은것은 -> 기존공간을 바꿈! 불변성x
- 리액트에서 컴포넌트가 화면에 그려지기 위해서 렌더링을함
- 리액트에서 화면 랜더링할지말지 결정하는 조건이 state 의 변화 , 단순변수는 무시함 
- 화면을 다시 그려준다 = 리랜더링 
- 배열 또는 객체가 나온다 -> 스프레드 문법 or map, filter (불변성을 지키기 위해서 사용)
... 으로 새로운 주소값으로 복사