Dev/React.js14 [React18] 4. 이벤트 핸들러 React에서는 JSX에 이벤트 핸들러를 추가할 수 있습니다. 이벤트 핸들러는 click, hover, input, focus 등 사용자 상호작용에 따라 유발되는 사용자 정의 함수입니다. 이벤트 핸들러 추가를 위해서는 먼저 함수를 정의하고 이를 적절한 JSX 태그에 prop 형태로 전달해야 합니다. 일반적으로 이벤트 핸들러의 이름은 handle 뒤에 이벤트 이름을 붙입니다. 만약 뒤에 () 있다면 렌더링 중에 클릭이 없음에 불구하고, 즉시 함수를 실행합니다. (ex onClick={handleClick()}) 인라인으로 코드를 작성해야 한다면 익명함수로 감싸서 호출할 함수를 생성해야 합니다. (onClick={()=>console.log('Click')}) ** 종종 부모 컴포넌트로 자식의 이벤트.. 2023. 9. 27. [React18] 3. UI 표현하기 중괄호 사용하기JSX를 사용하면 JavaScript 파일 내에 html과 유사한 마크업을 작성하여 렌더링 로직과 콘텐츠를 같은 같은 곳에 놓을 수 있습니다. 하지만 마크업 안에 로직을 추가하거나 동적 프로퍼티를 참조해야 할 때가 있습니다. 이때 JSX에서 중괄호를 사용하면 JavaScript를 사용할 수 있습니다. 동적으로 속성을 지정할 때 " "를 대신 { }로 바꾸면 JavaScript의 값을 사용할 수 있습니다. JSX 안에서 중괄호는 JSX 태그 안의 문자, 속성(attribute)의 = 뒤에서만 사용할 수 있습니다. ** 문자열, 숫자, 표현식 외에 객체로 전달할 때는 중괄호 쌍으로 객체를 감싸면 됩니다. 예를 들어 style 속성에 객체를 전달하면 적용됩니다. (ex ) propsReact .. 2023. 9. 15. [React18] 2. 컴포넌트 (import/export, JSX) 컴포넌트: UI 구성 요소React를 사용하면 마크업, CSS, JavaScript를 재사용 가능한 UI 요소인 사용자 정의 "컴포넌트"를 만들 수 있습니다. React 컴포넌트는 특별한 것처럼 보이지만 마크업으로 뿌릴 수 있는 JavaScript 함수입니다. 컴포넌트를 빌드하는 방법은 다음과 같습니다. 1. 컴포넌트 내보내기: export default를 사용해 다른 파일에 가져올 수 있도록 합니다.2. 함수 정의하기: function 키워드를 이용해 JavaScript 함수를 정의합니다. 이름은 대문자로 시작해야 하며 그렇지 않으면 작동하지 않습니다.3. 마크업 추가하기: 함수에 return 키워드를 이용해 JSX를 반환합니다. ** 컴포넌트는 보통 대문자로 시작합니다. 그 이유는 html은 소문자.. 2023. 9. 13. [React18] 1. React로 UI를 구현하는 법 React로 UI를 구현하기 위해서 일반적으로 5가지 단계를 거칩니다.Step 1: UI를 컴포넌트 계층으로 나누기가장 먼저 해야 하는 건 컴포넌트를 나누는 것입니다. (여기서 컴포넌트란 재사용이 가능한 독립된 모듈을 의미합니다.) 컴포넌트를 나눌 때는 여러 가지 방법이 있습니다. 이미 디자이너가 만든 작업을 참고하는 방법, 프로그래밍적으로 단일 책임, 즉 한 가지 일만 수행할 수 있을 만큼 분해하는 방법, CSS적으로 class 선택자 무엇을 만들지 결정해 그와 맞게 컴포넌트를 만드는 방법이 있습니다. 명확한 정답은 없습니다. 당장 해당 페이지에 맞는 컴포넌트일지라도 기획이 변경된다면 다른 컴포넌트로 분리해야 하는 경우도 있습니다. 중요한 것은 기획자, 디자이너, 퍼블리셔 등 함께 일하는 동료들끼리 해.. 2023. 9. 13. 이전 1 2 다음
