React 기본 문법, styled-component 사용

배열 수정하기

• 배열뒤에 ,(컴마) 찍고 입력
• 뒤에 오는값으로 덮어 씌움

const data = {phone: "2222"}
const a6 = {id: 1, name: "홍길동", phone: "1111", age: 17, gender: "male"};
const b6 = {...a6, ...data};
console.log(b6)

const users = [
    {id: 1, name: "가가", phone: "2222"},
    {id: 2, name: "나나", phone: "3333"},
    {id: 3, name: "다다", phone: "4444"}
];

const updateUserDto = {
    id: 2, name: "홍길동"
};
const newUsers =
        users.map(u => u.id === updateUserDto.id ? {...u, ...updateUserDto} : u); // const newUser = {...users}

 

useState

상태값을 변경해줌

function App() {

    // let number = 1; //상태값 아님
    const [number, setNumber] = useState(2);//React 안에 hooks 라이브러리 상태값이 됨.

    const add = () => {
        setNumber(number + 1) //리엑ㅌ트에 number 값 변경 요청
        console.log('add', number);
    };


    return (
        <div>
            <h1>숫자 : {number}</h1>
            <button onClick={add}>더하기</button>
        </div>
    )
};

export default App;

 

useEffect

• 실행시점
  • 1. App()함수가 최초 실행될 때(마운트 될때)
  • 2. 상태 변수가 변경될 때 (dependencyList에 등록해야함)
  • 3. 의존 리스트로 괄리 가능.
• 의존성자리를 비우면 최초 한번만 실행 가능.

function App() {

    const [data, setData] = useState(0);
    const [search, setSearch] = useState(0);

    const download = () => {
        let downloadData = 5;
        setData(downloadData);
    }

    useEffect(() => {
        console.log("useEffect 실행됨");
        setData(5);
        download();
    }, [search]);

    return (
        <div>
            <button onClick={() => {
                setSearch(2);
            }}>검색하기
            </button>
            <h1>데이터 : {data}</h1>
            <button onClick={() => {
                setData(data + 1)
            }}>더하기
            </button>
        </div>
    )
};

 

useMemo

• 메모라이제이션(기억)
• 리액트 hooks 라이브러리
• 함수를 기억해서 과한 연산을 막음.

function App() {

    const [list, setList] = useState([1, 2, 3, 4]);
    const [str, setStr] = useState("합계");


    const getAddResult =
        () => {
            let sum = 0;
            list.forEach(i => sum = sum + i);
            console.log("sum", sum)
            return sum;
        }
    const addResult = useMemo(() => getAddResult(), [list])

    return (
        <div>
            <button onClick={() => {
                setStr('안녕')
            }}>문자 변경
            </button>
            <button onClick={() => {
                setList([...list, 10])
            }}>리스트값 추가
            </button>
            <div>
                {list.map(i => <h1>{i}</h1>)}
            </div>
            <div>{str} : {addResult}</div>
        </div>
    )
};

 

useRef

• dom을 변경할 떄 사용

• function App() {
  
      const myRef = useRef(null);
  
      const [list, setList] = useState
      ([{id: 1, name: "길동"},
          {id: 2, name: "꺽정"}]);
      const myRefs = Array.from({length: list.length}).map(() => createRef());
  
      return (
          <div>
              <button onClick={() => {
                  //myRef.current.style.backgroundColor = 'red';
  
                  myRefs[0].current.style.backgroundColor = 'red';
  
              }}>색 변경
              </button>
              <div ref={myRef}>박스</div>
              {list.map((user, index) => (
                  <h1 ref={myRefs[index]}>{user.name}</h1>
              ))}
          </div>
      )
  };

 

components styled

• 파일 내부 스크립트 부분에서 스타일 변경 가능
• 기존 css 문법 그대로 사용가능.
• 동적 스타일 적용 가능.
  • npm install --save styled-components

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

http 요청 방법 : fetch, axios