JavaScript4 [JS/React] useContext로 맥락 찾아주기 리액트 훅 useContext 1. 왜 사용할까? React에서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 props를 이용합니다. 그러나 코드가 길어지고 컴포넌트들이 많아져서 구조가 복잡해지면 props로 데이터를 전달하는 과정이 꽤 복잡해질 수 있습니다. props는 데이터를 부모에서 자식으로 건네줍니다. 그런데 자식이 또 자기 자식에게 전달해야 할 경우도 생깁니다. 컴포넌트의 트리 구조가 깊어져서 자식의 자식의 자식의 자식... 에게 전달해야 한다면, props를 가지고 삼만리를 가는 기분... 그렇게 땅굴파듯 깊이 깊이 내려가는 것보다 좀 더 손쉽게 관리하는 방법이 있으면 좋겠습니다. 이럴 때 useContext를 사용합니다. 간단히 말해서, 복잡하고 다층적으로 쌓여있는 컴포넌트들 사.. 2023. 7. 22. [JS] 알고리즘 - 다이아몬드 형 별찍기 다이아몬드 형 별 찍기입력한 숫자만큼 다이아몬드 형의 별을 찍는 알고리즘입니다. 아래는 숫자 3을 입력했을 때의 결과예요. 아래는 숫자 5를 입력한 결과구요. 흔하게 생각해볼 수 있는 방법은 for문을 두개 돌리는 것이겠죠.별의 개수가 점차 증가하는 for문 이후에 별의 개수가 점차 감소하는 for문을 붙여서 만드는 방법이 바로 떠오를 것 같습니다. But, 조금 다르게 짜보는 게 재미있죠.아래 코드는 for문 한 개로 해결할 수 있을까 해서 만들어본 코드입니다. 핵심은1. 출력문이 '공백 + 별 + 공백' 형태라는 점n값으로 5를 입력하면 위와 같은 결과가 나와야 합니다. 1번줄 : 공백 4칸 + 별 1개2번줄 : 공백 3칸 + 별 3개3번줄 : 공백 2칸 + 별 5개4번줄 : 공백 1칸 + 별 7.. 2023. 7. 14. [html/js] onclick 이벤트 처리하는 세가지 방법 onclick 이벤트 처리하기 vanilla js 예시입니다. 리액트 X 1. 의 onclick 속성에 직접 코드 전달하기 클릭 2. 의 onclick 속성에 함수 실행문 전달하기 클릭 3. 을 DOM으로 조작하기 버튼을 getElementById로 객체로 받아와서 javascript .onclick 메서드로 함수 할당해주기 클릭 4. 를 javascript 이벤트 리스너로 조작하기 클릭 쓰고 보니 4가지네요. : P 2023. 7. 13. [JS] 이벤트 핸들러 2, ~.js에서만 작성하기 앞서 살펴본 방법은 두가지였습니다. hmtl 파일 안에서 만들기 / html 파일 안에서 일부 + JS 파일에서 일부 만들기 이번에는 JS 파일에서만 작성하여 동작시키는 방법을 알아보겠습니다. 그러기 위해서 필요한 것은 .addEventListener() 라는 함수입니다. 이 함수는 어떤 객체 뒤에 꼬리표로 붙여 사용하는 메소드입니다. 그렇다면 어떤 객체 뒤에 붙일까요? 네, 우리가 제어하길 원하는 html 객체 뒤에 붙입니다. 그러면 그 객체에다 이벤트가 발생시 할일을 하는 함수 '이벤트 핸들러'를 등록해줍니다. 그런데 앞에서 말했듯이 html파일은 건드리지 않는다고 했습니다. 즉 html파일은 건드리지 않고 js파일 내에서 리모컨으로 조종하듯 html의 요소를 요리조리 제어하는 겁니다. 형식은 이렇습.. 2023. 5. 31. 이전 1 다음
