리액트 Context 실행 오류

📘 리액트에 들어간지 세번째 되는 날

다시한번 React는 무엇인지 정의해본다.

--개념을 머리에 익히기위해 위키 내용을 따라써본다--

React는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과

개별 개발자 및 기업들 공동체에 의해 유지보수된다.

리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리엑트는

애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에

추가 라이브러리를 사용해야 한다.

 

--리액트는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 └─── 자주 사용되는 기능들을 정리해 놓은 것

                  자주 사용되는 기능 모음집

-- 리액트 장점은 웹으로 모바일 앱으로 발행이 쉽다.

└───  Components 재사용이 가능하다

 

-- 리액트를 더 쓰기 편하게 해주는 도구를 제공하는 오픈소시 Node.js를 설치 시 NPM, NPX 패키지 관리자도 같이 설치됨

-- 패키지 관리자를 통해 Reach에 필요한 다양한 모듈들을 다운 받을 수 있다.

 

-- 리액트 설치 방법  - nodeJs로 리액트 라이브러리 구축하기

npx

     npx create-react-app my-app(나의 폴더 이름)

npm

      npm run start  (자주사용하게 되는 명령어라고 함)

 

[proops 와 context]

프롭스는 뭔가를 물려받는 느낌이고 콘테스트는 한번에 변경되는 느낌이랄까 예를들어 이름변경을 한다면 props는 개명하고 보고드리는 것, context는 개명하고 공지 때리는 거라 한다.

📘  <후손/>을 작성하지 않아 발생한 오류

아래와 같이 후손을 잘 작성 한 후 로컬 호스트 확인 시 후손이 나오지 않았다

const 후손 = () => {
const {number, setNumber} = useContext(TestContext);

return (
  <>
 
  <h3>후손 컴포넌트 위치</h3>
       <input type="number" value={number} onChange={e => {setNumber(e.target.value)}}/>
  </>
  )
}

 

const 자식 = () => {
  //TestContext에서 제공된 값을 여기서 사용
  //const [number, setNumber] = useContext(TestContext);
  const {number, setNumber} = useContext(TestContext);

  return (
    <>
       <h3>자식 컴포넌트 위치</h3>
       <input type="number" value={number} onChange={e => {setNumber(e.target.value)}}/>
       
    </>
  )
}

 원인은 위 코드 input태그 아래에 <자식/>을 작성하지 않아서다  해당태그 작성시

[수정된 코드]

const 자식 = () => {
  //TestContext에서 제공된 값을 여기서 사용
  //const [number, setNumber] = useContext(TestContext);
  const {number, setNumber} = useContext(TestContext);

  return (
    <>
       <h3>자식 컴포넌트 위치</h3>
       <input type="number" value={number} onChange={e => {setNumber(e.target.value)}}/>
       <자식/>
    </>
  )
}