본문 바로가기

전체 글

 (76)
[TIL] hook - useContext 부모컴포넌트 => 자식컴포넌트로 내려줄 때 너무 깊어지게 되면 prop drilling 현상이 일어난다. 그러면 나중에는 어디에서 이 props가 전달되었는지 파악하기 어려워진다. context API를 쓰면 어떤 컴포넌트에 있더라도 전역적으로 사용할 수 있게된다. context API 개념 - createContext : context 생성 - Consumer : context 변화 감지 - Provider : context 하위 컴포넌트로 전달 // AllUseContext.js import { createContext } from "react"; export const AllUseContext = createContext(null); 다른 컴포넌트들이 쓸 수 있게끔 가장 상위에서 제공하는 역할을 하..
[TIL] React Hook - useState useState Hook은 가장 기본적인 hook으로 함수형 컴포넌트 내에서 가변적인 상태를 갖게한다. const [state, setState] = useState(초기값) 원래는 useState가 return 하는 값이 배열이다. 그리고 그 배열을 구조분해할당으로 받은 것 뿐이다. 배열에 return 값은 초기값으로 지정해놓은 그 변수 state가 있고, 그 state를 변경할 수 있는 setState가 있다. 함수형 업데이트가 왜 필요한가? export default funtion App() { const [number, setNumber] = useState(0); return Number state: {number}; //Number state: 0 } 여기에 만약 버튼을 누르면 +1씩 올라가는..
[TIL] React에서 map, filter로 문제풀어보기 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아서 새로운 결과를 반환한다. const students = [ { name: 'Alice', age: 17, grade: 'A' }, { name: 'Bob', age: 18, grade: 'B' }, { name: 'Charlie', age: 16, grade: 'C' }, { name: 'Diana', age: 19, grade: 'D' }, ]; // TODO: filter를 사용하여 18세 이상의 학생들만 선택해주세요. const filteredArr = students.filter((student, index) => student.age >= 18); // TODO: 학생이름을 클릭하면 나이와 점수가 aler..

티스토리툴바