[React] 개념정리1

---

1. 컴포넌트(Component)

• 사용자 인터페이스(UI)를 구성하는 독립적이고 재사용 가능한 코드의 조각

 

 

2. JSX(JavaScript XML)

• 리액트에서 UI를 정의할 때 사용하는 문법 확장

 

 

2-1. JSX 특징

1. {}를 사용하여 JavaScript 표현식을 포함 가능

const name = 'John';
const element = <h1>Hello, {name}!</h1>;

 

 

2. JSX 표현식은 React.createElement() 호출로 변환되며, JavaScript 객체를 반환

JSX 예시

const element = <h1 className="greeting">Hello, world!</h1>;

변환된 JavaScript 코드

const element = React.createElement( 'h1', { className: 'greeting' }, 'Hello, world!' );

변환된 객체

const element = ( <div> <h1 className="title">Hello, world!</h1> <p>This is a paragraph.</p> </div> );

 

 

3. class 대신 className, for 대신 htmlFor와 같이 일부 속성은 JavaScript 예약어와의 충돌을 피하기 위해 다른 이름을 사용

 

4.JSX 요소는 다른 JSX 요소를 자식으로 포함가능

const element = (
  <div>
    <h1>Hello!</h1>
    <p>Welcome to my website.</p>
  </div>
);

 

 

3. props (properties)

• 컴포넌트에 전달되는 데이터
• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용
• props는 읽기 전용이며, 컴포넌트 내부에서 변경할 수 없음

 

props전달

// 자식 컴포넌트
function User(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>Age: {props.age}</p>
      <p>Email: {props.email}</p>
    </div>
  );
}

// 부모 컴포넌트
function App() {
  return <User name="Alice" age={25} email="alice@example.com" />;
}

props 함수 전달

// 자식 컴포넌트
function Button(props) {
  return <button onClick={props.onClick}>{props.label}</button>;
}

// 부모 컴포넌트
function App() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <Button onClick={handleClick} label="Click Me" />;
}

 

 

4.state

• 컴포넌트 내에서 변경될 수 있는 동적인 데이터를 관리하는 데 사용
• 변경되는 데이터를 저장

// 초기 상태 설정 초기값 0 
//count로 접근, setCount로 변경
const [count, setCount] = useState(0);

 

 

 

5. 조건부렌더링

• 특정 조건에 따라 컴포넌트나 요소를 렌더링하는방법

//unreadMessages의 길이가 0보다 클때만 렌더링
 return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <h2>You have {unreadMessages.length} unread messages.</h2>
      )}
    </div>
  );

 

 

 

6.useState로 input 관리

• onChange로 input이 업데이트 되면 input 텍스트로 text 상태를 업데이트 한다.

function InputSample() {
  const [text, setText] = useState(''); // 상태 변수와 상태 업데이트 함수 선언

  // 입력 필드 변경 핸들러 함수
  const onChange = (e) => {
    setText(e.target.value); // 입력 필드의 값을 상태로 업데이트
  };

  // 초기화 버튼 클릭 핸들러 함수
  const onReset = () => {
    setText(''); // 상태를 빈 문자열로 설정하여 입력 필드를 초기화
  };

  return (
    <div>
      <input onChange={onChange} value={text} /> {/* 입력 필드 */}
      <button onClick={onReset}>초기화</button> {/* 초기화 버튼 */}
      <div>
        <b>값: {text}</b> {/* 현재 입력된 값을 표시 */}
      </div>
    </div>
  );
}

 

 

 

7. useRef

• DOM 요소나 값의 참조를 유지하는 데 사용(querySelector같은 DOM 조작 느낌가능)
• useState와 다르게 관리값이 변해도 화면이 렌더링되지않는다.(변경될 때 리렌더링을 유발하지 않음)
• 이전 상태나 props 값을 저장할 수 있다.

useRef를 통해 버튼누르면 입력창에 포커스

function FocusInput() {
  // useRef 훅을 사용하여 ref 객체 생성
  const inputRef = useRef(null);

  // 버튼 클릭 시 입력 필드에 포커스를 맞추는 함수
  const focusInput = () => {
    inputRef.current.focus(); // ref를 통해 DOM 요소에 접근하고 focus() 메서드 호출
  };

  return (
    <div>
      <input ref={inputRef} placeholder="여기에 포커스 맞추기" />
      <button onClick={focusInput}>포커스 맞추기</button>
    </div>
  );
}

8. 배열 렌더링

• 주로 배열의 map 메서드를 사용하여 배열의 각 요소를 컴포넌트로 변환
• 각 요소에는 고유한 key 속성을 제공해야함

names 배열을 통해 렌더링함

function NameList() {
  const names = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];

  return (
    <ul>
      {names.map((person) => (
        <li key={person.id}>{person.name}</li>
      ))}
    </ul>
  );
}

names 를 useState를 사용하면 names가 변할때 마다 새로 랜더링되며 반영될수있음

const [names, setNames] = useState([
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ]);
  
   return (
    <ul>
      {names.map((person) => (
        <li key={person.id}>{person.name}</li>
      ))}
    </ul>
);

 

 

 

9. 훅(Hooks)

• 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있도록 하는 기능
• useState: 상태 변수를 선언하고 관리합니다.
• useEffect: 사이드 이펙트를 처리합니다.
• useContext: 컨텍스트를 사용하여 전역 상태를 관리합니다.
• useReducer: 복잡한 상태 로직을 관리합니다.
• useCallback: 함수를 메모이제이션하여 성능을 최적화합니다.
• useMemo: 값을 메모이제이션하여 성능을 최적화합니다.
• useRef: 컴포넌트에서 변경 가능한 ref 객체를 관리합니다.
• useLayoutEffect: 레이아웃 변경을 처리합니다.
• useImperativeHandle: ref를 커스터마이징합니다.
• useDebugValue: 커스텀 훅의 디버그 값을 표시합니다.

10.생명주기(Lifecycle)

• 컴포넌트가 생성되고, 업데이트되며, 제거되는 과정

마운트 (Mount)

• DOM에 삽입될 때 발생
• 컴포넌트가 생성되고 렌더링되어 화면에 표시되기까지의 일련의 작업

업데이트 (Update)

• 컴포넌트의 상태나 속성이 변경되어 리렌더링이 필요할 때 발생
• 컴포넌트가 다시 렌더링되어 UI가 변경

언마운트 (Unmount)

• 컴포넌트가 DOM에서 제거될 때 발생

 

 

11. 가상 DOM

• 현대적인 UI 라이브러리에서 효율적으로 DOM을 관리하기 위해 사용되는 개념

 

12.useEffect

• 사이드 이펙트(side effects)를 관리하기 위한 훅
• 컴포넌트의 렌더링과는 직접적으로 관련이 없는 작업
• 마운트때 1번 ,의존성배열이 변경될때마다 작동

useEffect(() => {
  // 이곳에 사이드 이펙트를 수행하는 코드 작성

  // (선택 사항) cleanup 함수 반환
  return () => {
    // cleanup 작업
  };
}, [/* 의존성 배열 */]);

count 가 변경될때마다 실행된다.

useEffect(() => {
  console.log(`버튼 클릭 횟수: ${count}`);
}, [count]);

의존성 배열이 없으면 렌더링 될때마다 실행된다.

useEffect(() => {
  console.log(`버튼 클릭 횟수: ${count}`);
});

빈배열을쓰면 처음렌더링될때 1번만 실행된다.

useEffect(() => {
  console.log(`컴포넌트가 처음 렌더링될 때만 실행됩니다.`);
}, []);

 

 

13. useMemo

• 성능 최적화를 위해 메모이제이션을 수행

number가 안변하면 랜더링되더라도 다시 계산안하게됨

const expensiveValue = useMemo(() => computeExpensiveValue(number), [number]);