■ Context란? - 기존에 props를 이용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있었다. - 단, 해당 데이터를 자식 컴포너트가 아닌 후손 컴포넌트에서만 필요로 하는 데이터라면 자식 컴포넌트에서 불필요하게 코드를 작성해줘야 하는데 이때 Context를 사용하면 데이터 공급자와 소비자를 정의하여 데이터가 필요한 컴포넌트만 사용할 수 있게 구현할 수 있다. - Context를 사용하면 하위 컴포넌트가 여러 개인 구조에서 먼 후손 컴포넌트도 소비자를 import해서 필요한 데이터를 쓸 수 있다. Props Context props는 부모 컴포넌트에서 직계자식 컴포넌트에게만 전달되는 데이터이다. Context는 모든 컴포넌트에 전반적으로 영향을 끼칠 수 있다. ■ 예시 ● App4.j..
■ 전개연산자(SpreadOperator)란? - '...' 점 3개를 연달아서 사용하는 연산자로 여러 개의 객체를 병합하여 한개의 객체로 만들려고 할 때 사용한다.(깊은 복사) 예시) const jeans = [1, 2, 3]; // 1, 2, 3 const newJeans = [...jeans, 4, 5] // 1, 2, 3, 4, 5 ● 전개연산자를 활용한 이미지 추가 기능 function Spread(){ const [images, setImages] = useState([]); // images변수에 빈 배열 등록 const addImage = useCallback(() => { const random = randomImage(); const newImage = { id : random, src..
■ Fragements란? - return 되는 컴포넌트를 감싸는 틀이다. - 컴포넌트를 단위로 요소를 return 할 때는 반드시 단일한 1개의 요소만 반환할 수 있기 때문에 태그 요소를 반환하고 싶다면 반드시 하나의 html요소로 감싸주어야 한다. - 반환시키고자 하는 값이 여러개인 경우 에러가 발생할 수 있는데 이때 Fragements태그를 활용하면 불필요한 html코드를 없애고 여러 개의 요소를 반환할 수 있다. 예시) // Fragements가 적용되지 않은 코드 function Fragements(){ return( 리액트1 리액트2 ) } // Fragements가 적용된 코드 function Fragements(){ return( 리액트1 리액트2 ) }
■ 함수형 컴포넌트란? - return값이 있는 function과 동일한 구조의 컴포넌트이다. - 부모 컴포넌트에게서 props로 파라미터를 전달받아 사용할 수 있다. - render함수가 없기 때문에 return만 사용하여 화면을 그려준다. - 함수형 컴포넌트에서 state와 생명주기 함수의 기능을 사용해야 하는 경우 비슷한 기능을 제공하는 hook를 추가하면 된다. ※ state가 없고 생명주기 함수를 사용할 수 없다. ■ 대표적인 hook함수 ● useState() - state변수값을 선언하게 해주는 메서드(setState메서드와 비슷한 역할) [표현법] const [값을 담을 변수, 값을 변경하는 setter함수] = useState(초기값); - useState메서드는 길이 2짜리 배열을 반환..
■ PureComponent란? - class형 컴포넌트는 Component와 PureComponent가 있다. - 두 함수 모두 props와 state의 변경에 따라 render() 함수를 호출하는데 호출하는 기준이 약간 다르다. Component PureComponent setState함수 호출 시 내부적으로 변경하고자 하는 state의 값이 같더라도 항상 render() 함수를 호출한다. 바꿀 값 자체를 실제로 비교해서 값이 동일할 경우 변경되지 않았다고 간주하고 render() 함수를 호출하지 않는다. - Component와 비교해봤을 때 불필요한 화면변환이 발생하지 않으므로 약간이지만 페이지 성능을 향상시킬 수 있다. ● PureComponent class Pure extends PureComp..
■ PropTypes란? - 일반적으로 자바스크립트의 유연한 특성은 개발을 하는 데 있어 도움을 주지만 관리해야 할 파일이 많아지면 생산성 및 유지보수성이 떨어진다는 단점이 있다. - 이런점 때문에 명확한 자료형으로 개발을 해야 하는 타입스크립트가 각광받는 추세인데 반드시 자바스크립트로 개발을 해야만 하는 상황에서는 propTypes를 활용해서 해결할 수 있다. - PropTypes는 부모로부터 전달받은 props의 데이터의 type(자료형)을 검사해 준다. - 자식 컴포넌트에서 명시해 놓은 데이터타입과 부모로부터 넘겨받은 데이터 타입이 일치하지 않으면 콘솔에 경로를 띄워준다. ■ App.js import PropsDatatype from './02_PropsDataType'; function App()..
